components/authorship/authorship.react.tsx

Functions

Imports

It imports components/authorship/authorship.ts, components/switch/switch.react.tsx. Imported by components/authorship/examples.tsx.

Source

1import { Children, isValidElement, useEffect, useLayoutEffect, useRef, useState, type ReactElement, type ReactNode } from "react";
2import { Switch } from "../switch/switch.react.tsx";
3import { KINDS, KIND_LABEL, STORAGE_KEY, summarise, type Kind, type RunInput, type Summary } from "./authorship.ts";
4
5export type { Kind };
6
7export interface RunProps {
8  kind: Kind;
9  // A block (a div around paragraphs) rather than a span inside one.
10  block?: boolean;
11  // Something small before the word on the label: an Avatar with aria-hidden, for example.
12  badge?: ReactNode;
13  children?: ReactNode;
14}
15
16// One passage and who wrote it: the rule in the margin and the label ("You", "AI", "Quoted").
17export function Run({ kind, block = false, badge, children }: RunProps) {
18  const label = (
19    <span className="cap-run-label">
20      {badge}
21      {KIND_LABEL[kind]}
22    </span>
23  );
24  return block ? (
25    <div className="cap-run" data-kind={kind}>
26      {label}
27      {children}
28    </div>
29  ) : (
30    <span className="cap-run" data-kind={kind}>
31      {label}
32      {children}
33    </span>
34  );
35}
36
37// The words under each Run, found by walking the children (text nested in elements counts).
38function collect(node: ReactNode, kind: Kind | null, out: RunInput[]): void {
39  Children.forEach(node, (child) => {
40    if (typeof child === "string" || typeof child === "number") {
41      if (kind) out.push({ kind, text: String(child) });
42    } else if (isValidElement(child)) {
43      const el = child as ReactElement<{ kind?: Kind; children?: ReactNode }>;
44      collect(el.props.children, el.type === Run && el.props.kind ? el.props.kind : kind, out);
45    }
46  });
47}
48
49function Meter({ summary }: { summary: Summary }) {
50  const bar = useRef<HTMLSpanElement>(null);
51  // Widths go through the CSSOM, never a style prop (style-src 'self').
52  useLayoutEffect(() => {
53    for (const seg of bar.current?.querySelectorAll<HTMLElement>(".cap-authorship-seg") ?? []) {
54      const share = summary.shares.find((s) => s.kind === seg.dataset.kind);
55      seg.style.setProperty("--cap-share", String(share?.percent ?? 0));
56    }
57  }, [summary]);
58  return (
59    <div className="cap-meter cap-authorship-summary" data-cap-part="summary">
60      <span className="cap-meter-label">Authorship</span>
61      <span className="cap-meter-value" data-cap-part="text">
62        {summary.text}
63      </span>
64      <span className="cap-meter-bar" aria-hidden="true" ref={bar}>
65        {summary.shares.map((s) => (
66          <span key={s.kind} className="cap-authorship-seg" data-kind={s.kind} data-share={s.percent} />
67        ))}
68      </span>
69      <span className="cap-meter-note" data-cap-part="notes">
70        {summary.shares
71          .filter((s) => s.words > 0)
72          .map((s) => (
73            <span key={s.kind}>
74              {KIND_LABEL[s.kind]}: {s.words.toLocaleString("en")} {s.words === 1 ? "word" : "words"}
75            </span>
76          ))}
77      </span>
78    </div>
79  );
80}
81
82export interface AuthorshipProps {
83  // Controlled; leave both out and the component remembers the person's choice.
84  shown?: boolean;
85  onShownChange?: (shown: boolean) => void;
86  // Shown unless the person chose otherwise. Default true.
87  defaultShown?: boolean;
88  // Keep the choice in localStorage (the uncontrolled default).
89  remember?: boolean;
90  // The runs, as <Run>s inside your paragraphs.
91  children: ReactNode;
92}
93
94// The switch, the summary and the marked text. The summary counts the words under each Run.
95export function Authorship({ shown, onShownChange, defaultShown = true, remember = true, children }: AuthorshipProps) {
96  const [own, setOwn] = useState(defaultShown);
97  const on = shown ?? own;
98  const keep = remember && shown === undefined;
99  // The remembered choice is read after mount, so a server render and the first client render agree.
100  useEffect(() => {
101    if (!keep) return;
102    try {
103      const v = localStorage.getItem(STORAGE_KEY);
104      if (v === "on" || v === "off") setOwn(v === "on");
105    } catch {
106      // Storage blocked: the default stands.
107    }
108  }, [keep]);
109  const runs: RunInput[] = [];
110  collect(children, null, runs);
111  const summary = summarise(runs.filter((r) => KINDS.includes(r.kind)));
112  return (
113    <div className="cap-authorship" data-authorship={on ? "on" : "off"}>
114      <div className="cap-authorship-bar">
115        <Switch
116          label="Show authorship"
117          checked={on}
118          onCheckedChange={(next) => {
119            setOwn(next);
120            onShownChange?.(next);
121            if (keep) {
122              try {
123                localStorage.setItem(STORAGE_KEY, next ? "on" : "off");
124              } catch {
125                // Not remembered; the choice still applies now.
126              }
127            }
128          }}
129        />
130        <Meter summary={summary} />
131      </div>
132      <div className="cap-authorship-text">{children}</div>
133    </div>
134  );
135}