components/flag-list/flag-list.ts

Functions

Imports

It imports components/confirm-dialog/confirm-dialog.ts, components/flag-list/flag-list-model.ts, components/message/message.ts, components/row-list/row-list.ts, components/time/time.ts. Imported by components/flag-list/flag-list.react.tsx, components/publish-gate/publish-gate.ts.

Source

1// The flag list's behaviour and its pure helpers. A flag is raised against a draft by a check, a
2// reviewer or an AI, and stays on the record: resolving it keeps it, with who and when. A
3// suggestion a flag carries is inert until the owner applies it; nothing here applies one by
4// itself. The whole record is in the delivered HTML; this module only adds what a person does
5// to it (resolve, dismiss, reopen, apply, apply a batch) and keeps the anchors true to the
6// current text. No framework; the React wrapper reuses the pure functions.
7//
8// A result is said in a polite region, a refusal in an alert. A flag is a question for the
9// owner, never a decision; an open flag holds publish until it is fixed or dismissed.
10
11import { confirm } from "../confirm-dialog/confirm-dialog.ts";
12import { type SayOptions, fail, say } from "../message/message.ts";
13import { attachRowList } from "../row-list/row-list.ts";
14import { enhance as enhanceTime, parse as parseTime, text as timeText } from "../time/time.ts";
15import { type Flag, type FlagState, type Resolution, anchorStatus, appliable, applySuggestion, countFlags, revertSuggestion, summaryLine } from "./flag-list-model.ts";
16
17export { groupFlags, countFlags, summaryLine, anchorStatus, applySuggestion, revertSuggestion, appliable } from "./flag-list-model.ts";
18export type { FlagKind, FlagState, Resolution, AnchorStatus, FlagAnchor, FlagSuggestion, Flag, FlagCounts } from "./flag-list-model.ts";
19
20// ---------------------------------------------------------------------------------------
21// The page.
22
23const SVG = "http://www.w3.org/2000/svg";
24const GLYPHS: Record<string, string> = {
25  crit: '<path fill="currentColor" fill-rule="evenodd" d="M5 1h6l4 4v6l-4 4H5l-4-4V5zM7.2 4h1.6v5H7.2zM7.2 10.4h1.6V12H7.2z"/>',
26  warn: '<path fill="currentColor" fill-rule="evenodd" d="M8 1.2 15.4 14H.6zM7.3 6h1.4v4H7.3zM7.3 11h1.4v1.4H7.3z"/>',
27  info: '<rect x="1.5" y="1.5" width="13" height="13" rx="2" fill="none" stroke="currentColor" stroke-width="1.6"/><path fill="currentColor" d="M7.2 7h1.6v5H7.2zM7.2 4h1.6v1.7H7.2z"/>',
28  ok: '<path fill="currentColor" fill-rule="evenodd" d="M8 1a7 7 0 1 0 0 14A7 7 0 1 0 8 1zM3.9 9l3 3 5.2-5.6-1.4-1.4-3.8 4.2-1.6-1.6z"/>',
29  nodata: '<circle cx="8" cy="8" r="6.2" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M5 8h6" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>',
30  running: '<circle cx="8" cy="8" r="6.2" fill="none" stroke="currentColor" stroke-width="1.6" opacity="0.35"/><path fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" d="M8 1.8a6.2 6.2 0 0 1 6.2 6.2"/>',
31};
32
33// The status component's glyph, the same drawing (components/status).
34export function glyph(name: keyof typeof GLYPHS | string): SVGSVGElement {
35  const svg = document.createElementNS(SVG, "svg");
36  svg.setAttribute("class", "cap-status-glyph");
37  svg.setAttribute("viewBox", "0 0 16 16");
38  svg.setAttribute("aria-hidden", "true");
39  svg.setAttribute("focusable", "false");
40  svg.innerHTML = GLYPHS[name] ?? "";
41  return svg;
42}
43
44// A status: glyph, word, colour.
45export function statusEl(tone: "crit" | "warn" | "ok" | "info" | "nodata", word: string, glyphName: string = tone): HTMLSpanElement {
46  const s = document.createElement("span");
47  s.className = "cap-status";
48  s.dataset.tone = tone;
49  s.append(glyph(glyphName), word);
50  return s;
51}
52
53const READY = "data-cap-ready";
54const part = <T extends HTMLElement = HTMLElement>(el: ParentNode, name: string) => el.querySelector<T>(`[data-cap-part='${name}']`);
55
56function el<K extends keyof HTMLElementTagNameMap>(tag: K, className?: string, text?: string): HTMLElementTagNameMap[K] {
57  const e = document.createElement(tag);
58  if (className) e.className = className;
59  if (text !== undefined) e.textContent = text;
60  return e;
61}
62
63// A flag read back from its row, so the DOM stays the one source of truth.
64export function readFlag(li: HTMLElement): Flag {
65  const quote = li.querySelector(".cap-flag-quote-text")?.textContent ?? "";
66  const after = li.querySelector(".cap-flag-after-text")?.textContent;
67  const anchorId = li.dataset.anchorId;
68  const flag: Flag = {
69    id: li.dataset.flag ?? li.id,
70    kind: li.dataset.kind === "advisory" ? "advisory" : "blocking",
71    cause: part(li, "cause")?.textContent ?? "",
72    message: li.querySelector(".cap-flag-message")?.textContent ?? "",
73    state: li.dataset.state === "resolved" ? "resolved" : "open",
74  };
75  if (anchorId && quote) {
76    flag.anchor = { id: anchorId, quote, lost: li.dataset.anchor === "lost" };
77    if (li.dataset.before) flag.anchor.before = li.dataset.before;
78    if (li.dataset.after) flag.anchor.after = li.dataset.after;
79    const label = li.dataset.gotoLabel;
80    if (label) flag.anchor.label = label;
81  }
82  if (after !== undefined && after !== null) flag.suggestion = { replacement: after };
83  if (li.dataset.resolution) flag.resolution = li.dataset.resolution as Resolution;
84  if (li.dataset.resolvedBy) flag.resolvedBy = li.dataset.resolvedBy;
85  if (li.dataset.resolvedAt) flag.resolvedAt = li.dataset.resolvedAt;
86  return flag;
87}
88
89export function flagRows(root: ParentNode): HTMLElement[] {
90  return Array.from(root.querySelectorAll<HTMLElement>("li.cap-flag"));
91}
92
93export function readFlags(root: ParentNode): Flag[] {
94  return flagRows(root).map(readFlag);
95}
96
97const WORDS: Record<Resolution, string> = { resolved: "Resolved", dismissed: "Dismissed", applied: "Applied" };
98
99function actionButton(kind: string, label: string, message: string, variant?: string): HTMLButtonElement {
100  const b = el("button", "cap-btn");
101  b.type = "button";
102  b.dataset.size = "sm";
103  if (variant) b.dataset.variant = variant;
104  b.dataset.capPart = kind;
105  b.append(label, Object.assign(el("span", "cap-sr-only"), { textContent: ` flag: ${message}` }));
106  return b;
107}
108
109interface Ctx {
110  owner: boolean;
111  ownerName: string;
112}
113
114// Rebuilds the parts of one row that depend on its state and anchor, from its data attributes:
115// the critical edge, the title (a link only while the passage is there), the resolution on the
116// right, the actions, the suggestion's footer, and the line that says who closed it and when.
117export function renderFlag(li: HTMLElement, ctx: Ctx): void {
118  const flag = readFlag(li);
119  const status = anchorStatus(flag);
120  li.dataset.anchor = status;
121  if (flag.kind === "blocking" && flag.state === "open") li.dataset.tone = "crit";
122  else delete li.dataset.tone;
123
124  // Title: the link while the passage is found; plain words and "Anchor lost" otherwise.
125  const title = li.querySelector<HTMLElement>(".cap-row-title");
126  if (title && flag.anchor) {
127    const describedby = li.querySelector(".cap-row-title [aria-describedby]")?.getAttribute("aria-describedby") ?? `${li.id}-s ${li.id}-d`;
128    const message = el("span", "cap-flag-message", flag.message);
129    if (status === "found") {
130      const a = el("a");
131      a.href = `#${flag.anchor.id}`;
132      a.setAttribute("aria-describedby", describedby);
133      a.append(message, " ", el("span", "cap-flag-goto", flag.anchor.label ?? "Go to passage"));
134      title.replaceChildren(a);
135    } else {
136      const span = el("span", "cap-flag-title");
137      span.append(message, " ", statusEl("nodata", "Anchor lost"));
138      title.replaceChildren(span);
139    }
140  }
141
142  // The state on the right.
143  const meta = li.querySelector<HTMLElement>(".cap-row-meta");
144  if (meta) {
145    if (flag.state === "resolved") {
146      const r = flag.resolution ?? "resolved";
147      meta.replaceChildren(statusEl(r === "dismissed" ? "nodata" : "ok", WORDS[r]));
148    } else meta.replaceChildren();
149  }
150
151  // The actions.
152  const actions = li.querySelector<HTMLElement>(".cap-row-actions");
153  if (actions) {
154    actions.replaceChildren(...(flag.state === "open" ? [actionButton("resolve", "Resolve", flag.message), actionButton("dismiss", "Dismiss", flag.message, "quiet")] : [actionButton("reopen", "Reopen", flag.message)]));
155  }
156
157  // The quote's note and the suggestion's footer.
158  const quoteNote = part(li, "anchor-note");
159  if (quoteNote) {
160    quoteNote.replaceChildren();
161    if (status === "lost") quoteNote.append("The text this flag was raised on changed or was removed. Last known text:");
162    else if (status === "found") quoteNote.append("Raised on this passage:");
163    quoteNote.hidden = quoteNote.childNodes.length === 0;
164  }
165  const sug = li.querySelector<HTMLElement>(".cap-flag-suggestion");
166  if (sug && flag.suggestion) {
167    const applied = flag.state === "resolved" && flag.resolution === "applied";
168    sug.dataset.state = applied ? "applied" : "inert";
169    const foot = part(sug, "suggestion-foot");
170    if (foot) {
171      foot.replaceChildren();
172      if (applied) foot.append(el("p", "cap-flag-note", "Applied to the draft."));
173      else if (flag.state === "resolved") foot.append(el("p", "cap-flag-note", "Not applied. Reopen the flag to apply it."));
174      else if (status !== "found") foot.append(el("p", "cap-flag-note", "Cannot be applied: the passage it replaces has changed or gone."));
175      else if (ctx.owner) {
176        const b = el("button", "cap-btn");
177        b.type = "button";
178        b.dataset.size = "sm";
179        b.dataset.variant = "primary";
180        b.dataset.capPart = "apply";
181        b.append("Apply", Object.assign(el("span", "cap-sr-only"), { textContent: ` suggestion: ${flag.message}` }));
182        foot.append(b, el("span", "cap-flag-note", "Nothing changes in the draft until you apply it."));
183      } else foot.append(el("p", "cap-flag-note", `Only the owner${ctx.ownerName ? `, ${ctx.ownerName},` : ""} can apply this. The draft stays as it is until they do.`));
184    }
185  }
186
187  // Who closed it, and when.
188  const body = li.querySelector<HTMLElement>(".cap-flag-body");
189  body?.querySelector(".cap-flag-resolution")?.remove();
190  if (body && flag.state === "resolved") {
191    const p = el("p", "cap-flag-resolution");
192    p.append(`${WORDS[flag.resolution ?? "resolved"]}${flag.resolvedBy ? ` by ${flag.resolvedBy}` : ""}`);
193    if (flag.resolvedAt) {
194      const t = el("time", "cap-time");
195      t.dataset.cap = "time";
196      t.dateTime = flag.resolvedAt;
197      t.textContent = timeText(parseTime(flag.resolvedAt), "relative");
198      p.append(" ", t);
199      enhanceTime(p);
200    }
201    p.append(".");
202    body.append(p);
203  }
204}
205
206// ---------------------------------------------------------------------------------------
207
208export interface FlagTextIO {
209  getText(): string;
210  setText(text: string): void;
211}
212
213export interface FlagListHandle {
214  // Re-reads the current text and updates every flag's anchor, the counts and the batch button.
215  refresh(): void;
216  detach(): void;
217}
218
219// The text a `data-text-source` selector names: a textarea or input's value, else an element's text.
220function ioFor(selector: string | undefined): FlagTextIO | undefined {
221  if (!selector) return undefined;
222  const find = () => document.querySelector<HTMLElement>(selector);
223  if (!find()) return undefined;
224  return {
225    getText: () => {
226      const e = find();
227      return e instanceof HTMLTextAreaElement || e instanceof HTMLInputElement ? e.value : (e?.textContent ?? "");
228    },
229    setText: (t) => {
230      const e = find();
231      if (e instanceof HTMLTextAreaElement || e instanceof HTMLInputElement) {
232        e.value = t;
233        e.dispatchEvent(new Event("input", { bubbles: true }));
234      } else if (e) e.textContent = t;
235    },
236  };
237}
238
239function setCount(root: HTMLElement, name: string, n: number): void {
240  for (const c of root.querySelectorAll<HTMLElement>(`[data-count='${name}']`)) c.textContent = String(n);
241}
242
243export function attachFlagList(root: HTMLElement, io?: FlagTextIO): FlagListHandle {
244  const owner = root.hasAttribute("data-owner");
245  const ctx: Ctx = { owner, ownerName: root.dataset.ownerName ?? "" };
246  const viewer = root.dataset.viewer ?? "";
247  const list = root.querySelector<HTMLElement>(".cap-flags-list");
248  const detachRows = list ? attachRowList(list) : () => {};
249
250  const live = (text: string) => {
251    const region = part(root, "live");
252    if (!region) return;
253    region.textContent = "";
254    requestAnimationFrame(() => {
255      region.textContent = text;
256    });
257  };
258  // The page's message region says it, with Undo; without one the list's own polite region does.
259  const announce = (text: string, opts: SayOptions = {}) => {
260    if (document.querySelector("[data-cap='message']")) say(text, opts);
261    else live(text);
262  };
263  const problem = (text: string) => {
264    if (document.querySelector("[data-cap='message']")) fail(text);
265    else live(text);
266  };
267
268  const emit = (li: HTMLElement) => {
269    const f = readFlag(li);
270    root.dispatchEvent(new CustomEvent("cap:flag-change", { bubbles: true, detail: { id: f.id, state: f.state, resolution: f.resolution ?? null, resolvedBy: f.resolvedBy ?? null, resolvedAt: f.resolvedAt ?? null } }));
271  };
272
273  // Group headings, the summary, the filter's counts and the batch button follow the rows.
274  const tally = () => {
275    const flags = readFlags(root);
276    const c = countFlags(flags);
277    const summary = part(root, "summary");
278    if (summary) summary.textContent = summaryLine(c);
279    setCount(root, "open", c.open);
280    setCount(root, "resolved", c.resolved);
281    setCount(root, "all", c.total);
282    for (const kind of ["blocking", "advisory"] as const) {
283      const mine = flags.filter((f) => f.kind === kind);
284      const open = mine.filter((f) => f.state === "open").length;
285      const head = root.querySelector<HTMLElement>(`.cap-flag-group[data-group='${kind}'] .cap-flag-group-count`);
286      if (head) head.textContent = `${open} open, ${mine.length - open} resolved`;
287    }
288    const text = io?.getText();
289    const n = appliable(flags, text).length;
290    const batch = part<HTMLButtonElement>(root, "apply-all");
291    if (batch) {
292      batch.replaceChildren(`Apply ${n} suggestion${n === 1 ? "" : "s"}`);
293      batch.hidden = n === 0 || !owner;
294    }
295    const note = part(root, "owner-note");
296    if (note) note.hidden = owner || appliable(flags, text).length === 0;
297  };
298
299  // Moves the open flags to the top of their group so the record reads open first.
300  const order = () => {
301    if (!list) return;
302    for (const kind of ["blocking", "advisory"] as const) {
303      const group = list.querySelector<HTMLElement>(`.cap-flag-group[data-group='${kind}'] .cap-flag-group-rows`);
304      if (!group) continue;
305      const rows = flagRows(group);
306      const sorted = [...rows.filter((r) => r.dataset.state === "open"), ...rows.filter((r) => r.dataset.state === "resolved")];
307      sorted.forEach((r, i) => {
308        if (group.children[i] !== r) group.insertBefore(r, group.children[i] ?? null);
309      });
310    }
311  };
312
313  // Re-reads the text: a flag whose passage appeared or vanished is redrawn, then the counts.
314  const refresh = () => {
315    const text = io?.getText();
316    if (text !== undefined) {
317      for (const li of flagRows(root)) {
318        // A closed flag keeps what it said when it was closed: it is a record, not a live check.
319        if (!li.dataset.anchorId || li.dataset.state === "resolved") continue;
320        const next = anchorStatus(readFlag(li), text);
321        if (next === li.dataset.anchor) continue;
322        li.dataset.anchor = next;
323        renderFlag(li, ctx);
324      }
325    }
326    tally();
327  };
328
329  // Where focus goes if the row leaves the filtered view: chosen before the change, as the next
330  // visible row (or the one before it), so the order the rows are re-sorted into does not matter.
331  const heirOf = (li: HTMLElement): HTMLElement | null => {
332    const visible = (e: HTMLElement) => e.getClientRects().length > 0;
333    const all = flagRows(root);
334    const here = all.indexOf(li);
335    return all.slice(here + 1).find(visible) ?? all.slice(0, here).reverse().find(visible) ?? null;
336  };
337
338  // After a row's state changed: focus stays in the row on its new first action, or, when the row
339  // is no longer shown, goes to its heir. It is never left on nothing.
340  const settle = (li: HTMLElement, hadFocus: boolean, heir: HTMLElement | null) => {
341    if (!hadFocus) return;
342    const visible = (e: HTMLElement) => e.getClientRects().length > 0;
343    const first = (row: HTMLElement) => [...row.querySelectorAll<HTMLElement>(".cap-row-actions button"), ...row.querySelectorAll<HTMLElement>(".cap-row-title a")].find(visible);
344    const target = first(li) ?? (heir ? first(heir) : undefined);
345    if (target) return void target.focus();
346    (part(root, "filter")?.querySelector<HTMLElement>("input:checked") ?? root).focus();
347  };
348
349  const stamp = (li: HTMLElement, state: FlagState, resolution?: Resolution) => {
350    li.dataset.state = state;
351    if (state === "resolved") {
352      li.dataset.resolution = resolution ?? "resolved";
353      if (viewer) li.dataset.resolvedBy = viewer;
354      else delete li.dataset.resolvedBy;
355      li.dataset.resolvedAt = new Date().toISOString();
356    } else {
357      delete li.dataset.resolution;
358      delete li.dataset.resolvedBy;
359      delete li.dataset.resolvedAt;
360    }
361  };
362
363  const snapshot = (li: HTMLElement) => ({ state: li.dataset.state as FlagState, resolution: li.dataset.resolution as Resolution | undefined, by: li.dataset.resolvedBy, at: li.dataset.resolvedAt });
364  const restore = (li: HTMLElement, s: ReturnType<typeof snapshot>) => {
365    li.dataset.state = s.state;
366    for (const [k, v] of [["resolution", s.resolution], ["resolvedBy", s.by], ["resolvedAt", s.at]] as const) {
367      if (v) li.dataset[k] = v;
368      else delete li.dataset[k];
369    }
370  };
371
372  const primary = (li: HTMLElement) => () => li.querySelector<HTMLElement>(".cap-row-actions button") ?? li.querySelector<HTMLElement>(".cap-row-title a");
373
374  const change = (li: HTMLElement, state: FlagState, resolution: Resolution | undefined, said: string, undone: string) => {
375    const hadFocus = li.contains(document.activeElement);
376    const heir = heirOf(li);
377    const before = snapshot(li);
378    stamp(li, state, resolution);
379    renderFlag(li, ctx);
380    refresh();
381    order();
382    emit(li);
383    settle(li, hadFocus, heir);
384    announce(said, {
385      undo: () => {
386        restore(li, before);
387        renderFlag(li, ctx);
388        refresh();
389        order();
390        emit(li);
391      },
392      undone,
393      returnFocus: primary(li),
394    });
395  };
396
397  const applyOne = (li: HTMLElement) => {
398    if (!io || !owner) return;
399    const flag = readFlag(li);
400    const text = io.getText();
401    const next = applySuggestion(text, flag);
402    if (next === null) {
403      refresh();
404      return problem("Could not apply the suggestion: the passage it replaces has changed.");
405    }
406    const hadFocus = li.contains(document.activeElement);
407    const heir = heirOf(li);
408    const before = snapshot(li);
409    // Closed first, then the text: the passage is gone once replaced, and a closed flag keeps
410    // what it said, so the editor's input event must not find it open and call it lost.
411    stamp(li, "resolved", "applied");
412    renderFlag(li, ctx);
413    io.setText(next);
414    refresh();
415    order();
416    emit(li);
417    settle(li, hadFocus, heir);
418    announce("Suggestion applied to the draft.", {
419      undo: () => {
420        const back = revertSuggestion(io.getText(), flag);
421        if (back === null) throw new Error("The draft has changed around that passage since. Undo the edit in the editor instead.");
422        io.setText(back);
423        restore(li, before);
424        renderFlag(li, ctx);
425        refresh();
426        order();
427        emit(li);
428      },
429      undone: "Suggestion taken back. The passage is as it was.",
430      returnFocus: primary(li),
431    });
432  };
433
434  // A batch rewrites the draft, so it is previewed in the shared confirm dialog and only then done.
435  const applyAll = async () => {
436    if (!io || !owner) return;
437    const rows = flagRows(root);
438    const todo = rows.filter((li) => li.dataset.state === "open" && li.querySelector(".cap-flag-after-text") && li.dataset.anchor === "found");
439    if (todo.length === 0) return;
440    const flags = todo.map(readFlag);
441    const quoted = (s: string) => `“${s}”`;
442    const opener = part<HTMLElement>(root, "apply-all");
443    await confirm({
444      title: `Apply ${todo.length} suggestion${todo.length === 1 ? "" : "s"}?`,
445      lead: "This rewrites the draft. Each replacement is listed; nothing else changes.",
446      body: flags.map((f) => `${quoted(f.anchor?.quote ?? "")} becomes ${quoted(f.suggestion?.replacement ?? "")}`),
447      action: `Apply ${todo.length} suggestion${todo.length === 1 ? "" : "s"}`,
448      returnTo: part<HTMLElement>(root, "filter")?.querySelector<HTMLElement>("input:checked") ?? null,
449      perform: async () => {
450        const text = io.getText();
451        let next = text;
452        const done: number[] = [];
453        flags.forEach((f, i) => {
454          const out = applySuggestion(next, f);
455          if (out !== null) {
456            next = out;
457            done.push(i);
458          }
459        });
460        if (done.length === 0) throw new Error("None of the passages could be found any more.");
461        const before = done.map((i) => snapshot(todo[i] as HTMLElement));
462        for (const i of done) {
463          stamp(todo[i] as HTMLElement, "resolved", "applied");
464          renderFlag(todo[i] as HTMLElement, ctx);
465        }
466        io.setText(next);
467        refresh();
468        order();
469        for (const i of done) emit(todo[i] as HTMLElement);
470        const skipped = flags.length - done.length;
471        announce(`Applied ${done.length} suggestion${done.length === 1 ? "" : "s"} to the draft.${skipped ? ` ${skipped} skipped: the passage changed.` : ""}`, {
472          undo: () => {
473            let back = io.getText();
474            for (const i of [...done].reverse()) {
475              const out = revertSuggestion(back, flags[i] as Flag);
476              if (out === null) throw new Error("The draft has changed around those passages since. Undo the edits in the editor instead.");
477              back = out;
478            }
479            io.setText(back);
480            done.forEach((i, k) => {
481              restore(todo[i] as HTMLElement, before[k] as ReturnType<typeof snapshot>);
482              renderFlag(todo[i] as HTMLElement, ctx);
483            });
484            refresh();
485            order();
486            for (const i of done) emit(todo[i] as HTMLElement);
487          },
488          undone: "Suggestions taken back. The passages are as they were.",
489          returnFocus: () => (opener && !opener.hidden ? opener : (part<HTMLElement>(root, "filter")?.querySelector<HTMLElement>("input:checked") ?? null)),
490        });
491      },
492    });
493  };
494
495  const onClick = (e: MouseEvent) => {
496    const btn = (e.target as Element).closest<HTMLButtonElement>("button[data-cap-part]");
497    if (!btn || !root.contains(btn)) return;
498    const kind = btn.dataset.capPart;
499    const li = btn.closest<HTMLElement>("li.cap-flag");
500    if (kind === "apply-all") return void applyAll();
501    if (!li) return;
502    if (kind === "resolve") change(li, "resolved", "resolved", "Flag resolved.", "Flag reopened.");
503    else if (kind === "dismiss") change(li, "resolved", "dismissed", "Flag dismissed.", "Flag reopened.");
504    else if (kind === "reopen") change(li, "open", undefined, "Flag reopened.", "Flag closed again.");
505    else if (kind === "apply") applyOne(li);
506  };
507  root.addEventListener("click", onClick);
508
509  const source = root.dataset.textSource ? document.querySelector(root.dataset.textSource) : null;
510  const onInput = () => refresh();
511  source?.addEventListener("input", onInput);
512
513  tally();
514  if (io) refresh();
515
516  return {
517    refresh,
518    detach() {
519      root.removeEventListener("click", onClick);
520      source?.removeEventListener("input", onInput);
521      detachRows();
522      root.removeAttribute(READY);
523    },
524  };
525}
526
527// Attaches to every [data-cap="flag-list"] under root not attached yet. The text the anchors are
528// read against is the element named by data-text-source (a textarea's value, or an element's
529// text). Returns a function that detaches them all.
530export function enhance(root: ParentNode = document): () => void {
531  const handles: FlagListHandle[] = [];
532  for (const el of root.querySelectorAll<HTMLElement>("[data-cap='flag-list']:not([data-cap-ready])")) {
533    el.setAttribute(READY, "");
534    handles.push(attachFlagList(el, ioFor(el.dataset.textSource)));
535  }
536  return () => handles.forEach((h) => h.detach());
537}