components/draft-compare/draft-compare.react.tsx

Functions

Imports

It imports components/draft-compare/draft-compare.ts. Imported by components/draft-compare/examples.tsx.

Source

1import { useEffect, useId, useMemo, useRef } from "react";
2import { enhance, renderCompare, renderPatch, setView, VIEWS, type CompareLabels, type CompareSide, type CompareView, type RunSpan } from "./draft-compare.ts";
3
4export interface DraftCompareProps {
5  before: CompareSide;
6  after: CompareSide;
7  // Words for "Before" and "After" over each side.
8  labels?: Partial<CompareLabels>;
9  // The view shown. Give it (with onViewChange) to keep the choice in your own state; leave it
10  // out and the component remembers the person's choice in localStorage.
11  view?: CompareView;
12  onViewChange?: (view: CompareView) => void;
13  // Unchanged sentences kept beside a change before the rest fold. Default 1.
14  context?: number;
15  // Who wrote what, per side, by character offset: each sentence is marked with its run.
16  runs?: { before?: RunSpan[]; after?: RunSpan[] };
17  // How alike two sentences must be (0 to 1) to count as one edited. Default 0.4.
18  similarity?: number;
19  // Ids and radio names; give each compare on a page its own. Made up when left out.
20  id?: string;
21}
22
23// Renders exactly the markup renderCompare writes, so a server render (renderToString) and the
24// browser agree, and the same behaviour module wires it.
25export function DraftCompare({ before, after, labels, view, onViewChange, context, runs, similarity, id }: DraftCompareProps) {
26  const own = useId().replace(/[^a-zA-Z0-9]/g, "");
27  const host = useRef<HTMLDivElement>(null);
28  const first = useRef<CompareView>(view ?? "side");
29  const controlled = view !== undefined;
30  const key = JSON.stringify([before, after, labels, runs, context, similarity, id, controlled]);
31  // The view is not part of the html's identity: the radios hold it, in CSS, so choosing one
32  // does not rebuild the page's folds and focus.
33  const html = useMemo(() => renderCompare(before, after, { id: id ?? `compare-${own}`, view: first.current, context, labels, runs, similarity, remember: !controlled }), [key, own]);
34
35  useEffect(() => {
36    const el = host.current;
37    return el ? enhance(el) : undefined;
38  }, [html]);
39
40  useEffect(() => {
41    const section = host.current?.querySelector<HTMLElement>(".cap-compare");
42    if (section && view) setView(section, view);
43  }, [view, html]);
44
45  useEffect(() => {
46    const el = host.current;
47    if (!el || !onViewChange) return undefined;
48    const onChange = (e: Event) => {
49      const t = e.target as HTMLInputElement;
50      if (t.matches(".cap-compare-bar input[type='radio']") && (VIEWS as readonly string[]).includes(t.value)) onViewChange(t.value as CompareView);
51    };
52    el.addEventListener("change", onChange);
53    return () => el.removeEventListener("change", onChange);
54  }, [onViewChange, html]);
55
56  return <div ref={host} dangerouslySetInnerHTML={{ __html: html }} />;
57}
58
59export interface DraftPatchProps {
60  // A unified git patch (git diff, git show, git format-patch).
61  patch: string;
62  // What the patch is of; names the region.
63  title?: string;
64  // Give each patch on a page its own id. Made up when left out.
65  id?: string;
66}
67
68// The patch mode: a unified patch by line, with a literal plus or minus on each changed line.
69// Pure markup, so a server render and the browser agree; there is no behaviour to attach.
70export function DraftPatch({ patch, title, id }: DraftPatchProps) {
71  const own = useId().replace(/[^a-zA-Z0-9]/g, "");
72  const html = useMemo(() => renderPatch(patch, { id: id ?? `patch-${own}`, title }), [patch, title, id, own]);
73  return <div dangerouslySetInnerHTML={{ __html: html }} />;
74}