components/authorship/authorship.ts

Functions

Imports

It imports components/draft-compare/draft-compare.ts, components/switch/switch.ts. Imported by components/authorship/authorship.react.tsx.

Source

1// Authorship marks: who wrote each passage of a text, shown or hidden by one switch.
2//
3// A passage is a "run" (`.cap-run` with data-kind "you", "ai" or "quoted"). This module has the
4// pure counting (countWords, summarise, summaryText, summaryHtml: safe on a server and in node's
5// test runner) and the behaviour (enhance: the switch, the remembered choice, the summary).
6
7import { countWords } from "../draft-compare/draft-compare.ts";
8import { syncWord } from "../switch/switch.ts";
9
10export type Kind = "you" | "ai" | "quoted";
11export const KINDS: readonly Kind[] = ["you", "ai", "quoted"];
12
13// What each kind is called in the summary line, and on a run's label.
14export const KIND_WORD: Record<Kind, string> = { you: "you", ai: "AI", quoted: "quoted" };
15export const KIND_LABEL: Record<Kind, string> = { you: "You", ai: "AI", quoted: "Quoted" };
16
17export { countWords };
18
19export interface RunInput {
20  kind: Kind;
21  // Either the words already counted, or the text to count.
22  words?: number;
23  text?: string;
24}
25
26export interface Share {
27  kind: Kind;
28  words: number;
29  // A whole number; the three always add up to 100 (largest remainder), 0 when nothing is marked.
30  percent: number;
31}
32
33export interface Summary {
34  total: number;
35  // All three kinds, in the order you, AI, quoted.
36  shares: Share[];
37  // "62% you, 31% AI, 7% quoted by words": kinds with no words are left out.
38  text: string;
39}
40
41// Word counts per kind, as percentages that add up to 100, and the sentence that says them.
42export function summarise(runs: readonly RunInput[]): Summary {
43  const words: Record<Kind, number> = { you: 0, ai: 0, quoted: 0 };
44  for (const r of runs) {
45    if (!(r.kind in words)) continue;
46    words[r.kind] += r.words ?? countWords(r.text ?? "");
47  }
48  const total = words.you + words.ai + words.quoted;
49  // Largest remainder: floor every share, then give the spare points to the biggest remainders.
50  const raw = KINDS.map((kind) => ({ kind, exact: total === 0 ? 0 : (words[kind] / total) * 100 }));
51  const floors = raw.map((r) => Math.floor(r.exact));
52  let spare = total === 0 ? 0 : 100 - floors.reduce((a, b) => a + b, 0);
53  const order = raw.map((r, i) => ({ i, rem: r.exact - Math.floor(r.exact) })).sort((a, b) => b.rem - a.rem || a.i - b.i);
54  for (const o of order) {
55    if (spare <= 0) break;
56    floors[o.i] = (floors[o.i] ?? 0) + 1;
57    spare--;
58  }
59  const shares: Share[] = KINDS.map((kind, i) => ({ kind, words: words[kind], percent: floors[i] ?? 0 }));
60  return { total, shares, text: summaryText(shares) };
61}
62
63export function summaryText(shares: Share[]): string {
64  const shown = shares.filter((s) => s.words > 0);
65  if (shown.length === 0) return "No marked passages";
66  return `${shown.map((s) => `${s.percent}% ${KIND_WORD[s.kind]}`).join(", ")} by words`;
67}
68
69const esc = (s: string) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
70
71// The summary as html, for a server to write: the line, the bar (drawn by enhance, which sets
72// each segment's width), and the word counts in text.
73export function summaryHtml(summary: Summary, label = "Authorship"): string {
74  const segs = summary.shares.map((s) => `<span class="cap-authorship-seg" data-kind="${s.kind}" data-share="${s.percent}"></span>`).join("");
75  const notes = summary.shares
76    .filter((s) => s.words > 0)
77    .map((s) => `<span>${KIND_LABEL[s.kind]}: ${s.words.toLocaleString("en")} ${s.words === 1 ? "word" : "words"}</span>`)
78    .join("");
79  return `<div class="cap-meter cap-authorship-summary" data-cap-part="summary"><span class="cap-meter-label">${esc(label)}</span><span class="cap-meter-value" data-cap-part="text">${esc(summary.text)}</span><span class="cap-meter-bar" aria-hidden="true">${segs}</span><span class="cap-meter-note" data-cap-part="notes">${notes}</span></div>`;
80}
81
82// ---------------------------------------------------------------------------------------
83// The behaviour
84// ---------------------------------------------------------------------------------------
85
86export const STORAGE_KEY = "cap-authorship";
87const READY = "data-cap-ready";
88
89function stored(): boolean | null {
90  try {
91    const v = localStorage.getItem(STORAGE_KEY);
92    return v === "on" ? true : v === "off" ? false : null;
93  } catch {
94    return null;
95  }
96}
97
98function remember(shown: boolean): void {
99  try {
100    localStorage.setItem(STORAGE_KEY, shown ? "on" : "off");
101  } catch {
102    // Private windows and blocked storage: the choice is just not remembered.
103  }
104}
105
106// Every run's words, counted once: text inside a run belongs to the nearest run around it, a
107// label never counts, and text outside any run is not marked so it is left out.
108export function collectRuns(root: Element): RunInput[] {
109  const totals = new Map<Element, number>();
110  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
111  for (let n = walker.nextNode(); n; n = walker.nextNode()) {
112    const parent = (n as Text).parentElement;
113    if (!parent || parent.closest(".cap-run-label, .cap-authorship-bar")) continue;
114    const run = parent.closest(".cap-run");
115    if (!run || !root.contains(run)) continue;
116    totals.set(run, (totals.get(run) ?? 0) + countWords(n.textContent ?? ""));
117  }
118  const out: RunInput[] = [];
119  for (const [run, words] of totals) {
120    const kind = (run as HTMLElement).dataset.kind as Kind | undefined;
121    if (kind && KINDS.includes(kind)) out.push({ kind, words });
122  }
123  return out;
124}
125
126// Draws the summary's bar: each segment's share of the width, through the CSSOM so apps keep
127// style-src 'self'.
128function drawBar(summary: Element, shares: Share[]): void {
129  for (const seg of summary.querySelectorAll<HTMLElement>(".cap-authorship-seg")) {
130    const share = shares.find((s) => s.kind === seg.dataset.kind);
131    seg.dataset.share = String(share?.percent ?? 0);
132    seg.style.setProperty("--cap-share", String(share?.percent ?? 0));
133  }
134}
135
136// Counts the runs inside root and rewrites its summary (the line, the word counts, the bar).
137export function refresh(root: Element): Summary {
138  const summary = summarise(collectRuns(root));
139  const el = root.querySelector<HTMLElement>("[data-cap-part='summary']");
140  if (el) {
141    const line = el.querySelector("[data-cap-part='text']");
142    if (line) line.textContent = summary.text;
143    const notes = el.querySelector("[data-cap-part='notes']");
144    if (notes) {
145      notes.replaceChildren(
146        ...summary.shares
147          .filter((s) => s.words > 0)
148          .map((s) => {
149            const span = document.createElement("span");
150            span.textContent = `${KIND_LABEL[s.kind]}: ${s.words.toLocaleString("en")} ${s.words === 1 ? "word" : "words"}`;
151            return span;
152          }),
153      );
154    }
155    drawBar(el, summary.shares);
156  }
157  return summary;
158}
159
160export function isShown(root: Element): boolean {
161  return root.getAttribute("data-authorship") !== "off";
162}
163
164// Shows or hides the marks: data-authorship on the container, the switch to match. With
165// `persist` (the default, unless the container says data-remember="off") the choice is kept.
166export function setShown(root: HTMLElement, shown: boolean, persist = root.dataset.remember !== "off"): void {
167  root.setAttribute("data-authorship", shown ? "on" : "off");
168  const input = root.querySelector<HTMLInputElement>(".cap-authorship-bar input[role='switch']");
169  if (input && input.checked !== shown) input.checked = shown;
170  const label = input?.closest("label");
171  if (label) syncWord(label);
172  if (persist) remember(shown);
173}
174
175function attach(root: HTMLElement): () => void {
176  const input = root.querySelector<HTMLInputElement>(".cap-authorship-bar input[role='switch']");
177  const keep = root.dataset.remember !== "off";
178  const was = keep ? stored() : null;
179  if (was !== null) setShown(root, was, false);
180  else if (input) setShown(root, input.checked && isShown(root), false);
181  refresh(root);
182  const onChange = () => input && setShown(root, input.checked);
183  input?.addEventListener("change", onChange);
184  return () => input?.removeEventListener("change", onChange);
185}
186
187// Attaches to every [data-cap="authorship"] under root (or root itself) not yet attached:
188// applies the remembered choice, wires the switch, and counts the summary. Returns a function
189// that detaches them all.
190export function enhance(root: ParentNode = document): () => void {
191  const found = [...root.querySelectorAll<HTMLElement>("[data-cap='authorship']:not([data-cap-ready])")];
192  if (root instanceof HTMLElement && root.matches("[data-cap='authorship']:not([data-cap-ready])")) found.unshift(root);
193  const undo: Array<() => void> = [];
194  for (const el of found) {
195    el.setAttribute(READY, "");
196    const off = attach(el);
197    undo.push(() => {
198      off();
199      el.removeAttribute(READY);
200    });
201  }
202  return () => undo.forEach((f) => f());
203}