components/draft-compare/draft-compare.ts

Functions

Imports

It imports components/draft-compare/draft-compare-diff.ts, components/draft-compare/draft-compare-patch.ts, components/draft-compare/draft-compare-render.ts, components/row-list/row-list.ts. Imported by components/authorship/authorship.ts, components/draft-compare/draft-compare.react.tsx, components/draft-compare/examples.tsx.

Source

1// Draft compare: two versions of a text, compared by sentence and then by word.
2//
3// Three parts, all plain TypeScript with no framework and nothing that touches the page at
4// import time, so a server (or node's test runner) can use the first two:
5//   1. the diff:      diffWords, diffSentences, splitSentences, analyse (draft-compare-diff.ts)
6//   2. the renderer:  renderCompare(before, after, options) returns the HTML string
7//                     (draft-compare-render.ts; renderPatch, for a git patch, in draft-compare-patch.ts)
8//   3. the behaviour: enhance(root) wires the jump keys, the view memory and "expand all" (here)
9//
10// The HTML holds every view (side by side, inline, changes only) so a reader without script
11// still gets all of it; the radios in the bar choose which one shows, in CSS.
12
13import { singleKeysOff } from "../row-list/row-list.ts";
14import { type CompareView, STORAGE_KEY, VIEWS } from "./draft-compare-render.ts";
15
16export { tokenize, countWords, commonSubsequence, diffWords, splitSentences, diffSentences, analyse, countsText } from "./draft-compare-diff.ts";
17export type { Op, WordPart, DiffOptions, Sentence, Entry, SentenceOptions, Counts, Analysis } from "./draft-compare-diff.ts";
18export { VIEWS, STORAGE_KEY, esc, renderCompare } from "./draft-compare-render.ts";
19export type { CompareView, CompareSide, RunKind, RunSpan, CompareLabels, CompareOptions } from "./draft-compare-render.ts";
20export { parsePatch, patchCounts, patchCountsText, revisionPair, renderPatch } from "./draft-compare-patch.ts";
21export type { PatchOp, PatchLine, PatchHunk, PatchFile, PatchOptions, PatchCounts } from "./draft-compare-patch.ts";
22
23// ---------------------------------------------------------------------------------------
24// The behaviour
25// ---------------------------------------------------------------------------------------
26
27const READY = "data-cap-ready";
28
29function readView(): CompareView | null {
30  try {
31    const v = localStorage.getItem(STORAGE_KEY);
32    return v && (VIEWS as readonly string[]).includes(v) ? (v as CompareView) : null;
33  } catch {
34    return null;
35  }
36}
37
38function writeView(v: CompareView): void {
39  try {
40    localStorage.setItem(STORAGE_KEY, v);
41  } catch {
42    // Private windows and blocked storage: the choice simply is not remembered.
43  }
44}
45
46// The view the radios show now.
47export function currentView(root: Element): CompareView {
48  const v = root.querySelector<HTMLInputElement>(".cap-compare-bar input[type='radio']:checked")?.value;
49  return v && (VIEWS as readonly string[]).includes(v) ? (v as CompareView) : "side";
50}
51
52// Chooses a view (the radio the CSS reads). Fires no event.
53export function setView(root: Element, view: CompareView): void {
54  const radio = root.querySelector<HTMLInputElement>(`.cap-compare-bar input[type='radio'][value='${view}']`);
55  if (radio) radio.checked = true;
56}
57
58const isTextEntry = (e: KeyboardEvent): boolean => {
59  if (e.ctrlKey || e.metaKey || e.altKey || e.isComposing) return true;
60  const t = e.target as HTMLElement | null;
61  if (!t) return false;
62  if (t.isContentEditable || /^(TEXTAREA|SELECT)$/.test(t.tagName) || t.closest("[role='combobox'], [role='textbox']")) return true;
63  return t.tagName === "INPUT" && !/^(radio|checkbox|button)$/.test((t as HTMLInputElement).type);
64};
65
66function attach(root: HTMLElement): () => void {
67  const live = root.querySelector<HTMLElement>("[data-cap-part='live']");
68  const total = root.querySelectorAll<HTMLElement>("[data-jump]").length;
69  let current = 0;
70  const undo: Array<() => void> = [];
71
72  for (const b of root.querySelectorAll<HTMLElement>("[data-cap-part='prev'], [data-cap-part='next']")) b.hidden = total === 0;
73
74  // The remembered view.
75  const remember = root.dataset.remember !== "off";
76  if (remember) {
77    const stored = readView();
78    if (stored) setView(root, stored);
79  }
80  const onView = (e: Event) => {
81    const t = e.target as HTMLInputElement;
82    if (remember && t.matches("input[type='radio']")) writeView(t.value as CompareView);
83  };
84  root.querySelector(".cap-compare-bar")?.addEventListener("change", onView);
85  undo.push(() => root.querySelector(".cap-compare-bar")?.removeEventListener("change", onView));
86
87  const target = (n: number): HTMLElement | null => {
88    const view = root.querySelector<HTMLElement>(`.cap-compare-view[data-view='${currentView(root)}']`);
89    return view?.querySelector<HTMLElement>(`[data-change='${n}']`) ?? null;
90  };
91
92  const goTo = (n: number) => {
93    if (total === 0) return;
94    current = ((((n - 1) % total) + total) % total) + 1;
95    for (const el of root.querySelectorAll<HTMLElement>("[data-change]")) {
96      if (el.dataset.change === String(current)) el.setAttribute("data-current", "");
97      else el.removeAttribute("data-current");
98    }
99    for (const a of root.querySelectorAll<HTMLElement>("[data-jump]")) {
100      if (a.dataset.jump === String(current)) a.setAttribute("aria-current", "true");
101      else a.removeAttribute("aria-current");
102    }
103    const el = target(current);
104    if (!el) return;
105    el.focus();
106    el.scrollIntoView({ block: "center" });
107    if (live) live.textContent = `Change ${current} of ${total}: ${el.dataset.added ?? 0} words added, ${el.dataset.removed ?? 0} removed.`;
108  };
109
110  const onClick = (e: Event) => {
111    const t = e.target as HTMLElement;
112    const link = t.closest<HTMLElement>("[data-jump]");
113    if (link && root.contains(link)) {
114      e.preventDefault();
115      goTo(Number(link.dataset.jump));
116      return;
117    }
118    const part = t.closest<HTMLElement>("[data-cap-part]")?.dataset.capPart;
119    if (part === "next") goTo(current + 1);
120    else if (part === "prev") goTo(current === 0 ? total : current - 1);
121    else if (part === "expand") toggleAll(root);
122  };
123  root.addEventListener("click", onClick);
124  undo.push(() => root.removeEventListener("click", onClick));
125
126  // n and p: single keys, so they honour the page's switch for them, never act while typing,
127  // and act only when focus is inside the compare or it is the page's primary one.
128  const onKey = (e: KeyboardEvent) => {
129    if (e.defaultPrevented || (e.key !== "n" && e.key !== "p")) return;
130    if (isTextEntry(e) || singleKeysOff() || total === 0) return;
131    const active = document.activeElement;
132    const owns = (active && root.contains(active)) || (root.hasAttribute("data-cap-primary") && !active?.closest("dialog[open], [role='dialog'], [role='menu'], [role='listbox']"));
133    if (!owns) return;
134    e.preventDefault();
135    if (e.key === "n") goTo(current + 1);
136    else goTo(current === 0 ? total : current - 1);
137  };
138  document.addEventListener("keydown", onKey);
139  undo.push(() => document.removeEventListener("keydown", onKey));
140
141  // "Expand all" appears when something is folded, and says which way it will go.
142  const expand = root.querySelector<HTMLButtonElement>("[data-cap-part='expand']");
143  const gaps = () => [...root.querySelectorAll<HTMLDetailsElement>("details[data-cap-part='gap']")];
144  const syncExpand = () => {
145    if (!expand) return;
146    const all = gaps();
147    expand.hidden = all.length === 0;
148    const open = all.length > 0 && all.every((d) => d.open);
149    expand.setAttribute("aria-pressed", String(open));
150    expand.textContent = open ? "Collapse unchanged" : "Expand all unchanged";
151  };
152  syncExpand();
153  root.addEventListener("toggle", syncExpand, true);
154  undo.push(() => root.removeEventListener("toggle", syncExpand, true));
155
156  return () => undo.forEach((f) => f());
157}
158
159// Opens every folded passage, or closes them all when every one is open.
160export function toggleAll(root: Element): void {
161  const gaps = [...root.querySelectorAll<HTMLDetailsElement>("details[data-cap-part='gap']")];
162  const open = !gaps.every((d) => d.open);
163  for (const d of gaps) d.open = open;
164}
165
166// Attaches to every [data-cap="draft-compare"] under root (or root itself) not yet attached.
167// Returns a function that detaches them all.
168export function enhance(root: ParentNode = document): () => void {
169  const found = [...root.querySelectorAll<HTMLElement>("[data-cap='draft-compare']:not([data-cap-ready])")];
170  if (root instanceof HTMLElement && root.matches("[data-cap='draft-compare']:not([data-cap-ready])")) found.unshift(root);
171  const undo: Array<() => void> = [];
172  for (const el of found) {
173    el.setAttribute(READY, "");
174    const off = attach(el);
175    undo.push(() => {
176      off();
177      el.removeAttribute(READY);
178    });
179  }
180  return () => undo.forEach((f) => f());
181}