app/components/admin/kb-step-text.tsx

Functions

Imports

It imports app/kb/step-marks.mjs. Imported by app/components/admin/kb-form-steps.tsx.

Source

1import { useEffect, useId, useLayoutEffect, useRef, useState, type MutableRefObject } from "react";
2
3import { Button } from "capsomer/react/button";
4
5import { PIECE_NAMES, pieceLabel, stepPieces, writePiece, type Piece } from "~/kb/step-marks.mjs";
6
7/*
8 * A step's words with its marks as chips (docs/KNOWLEDGE-BASE.md), as protocols.io shows a step's components: typing is
9 * plain text, and each reagent, piece of equipment, timer and temperature is one chip that is edited in a small popover
10 * and deleted as one unit. Under the chips the step stays the text the file holds: a chip carries the exact text it was
11 * read from, so a step nobody touched is written back byte for byte, and an edited chip is written in the format's own
12 * spelling (step-marks.mjs). Marks typed by hand become chips when the text loses focus.
13 */
14
15const DURATIONS = ["seconds", "minutes", "hours", "days"];
16const UNITS = ["µl", "ml", "l", "mg", "g", "µg", "ng", "mM", "M", "%", "U", "tubes", "plates"];
17
18type Chip = Exclude<Piece, { kind: "text" }>;
19
20const escape = (text: string) => text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
21
22/** The step as the editor's markup: its words as text, each mark a chip that carries the text it was read from. */
23function chipHtml(text: string) {
24  return stepPieces(text)
25    .map((piece) => {
26      if (piece.kind === "text") return escape(piece.raw);
27      const label = pieceLabel(piece);
28      return `<span class="kb-chip" data-kind="${piece.kind}" data-raw="${escape(piece.raw)}" contenteditable="false" role="button" tabindex="0" aria-label="${escape(`${PIECE_NAMES[piece.kind]}: ${label}`)}">${escape(label)}</span>`;
29    })
30    .join("");
31}
32
33/** The text a stretch of the editor's markup stands for: its words, and each chip's own text. */
34function textOf(node: Node): string {
35  let out = "";
36  node.childNodes.forEach((child) => {
37    if (child.nodeType === Node.TEXT_NODE) out += child.textContent ?? "";
38    else if (child instanceof HTMLElement) out += child.dataset.raw ?? (child.tagName === "BR" ? "" : textOf(child));
39  });
40  // A step is one line; a browser's non-breaking space for a typed trailing space is a space.
41  return out.replace(/ /g, " ").replace(/\n/g, " ");
42}
43
44/** Where in the text a point in the editor falls. */
45function offsetAt(root: HTMLElement, end: (range: Range) => void) {
46  const range = document.createRange();
47  range.setStart(root, 0);
48  end(range);
49  return textOf(range.cloneContents()).length;
50}
51
52function ChipPopover({
53  chip,
54  names,
55  style,
56  onDone,
57  onRemove,
58  onCancel,
59}: {
60  chip: Chip;
61  names: { reagent: string[]; equipment: string[] };
62  style: React.CSSProperties;
63  onDone: (chip: Chip) => void;
64  onRemove: () => void;
65  onCancel: () => void;
66}) {
67  const [draft, setDraft] = useState<Chip>(chip);
68  const id = useId();
69  const box = useRef<HTMLDivElement>(null);
70  useEffect(() => {
71    box.current?.querySelector<HTMLInputElement>("input, select")?.focus();
72  }, []);
73  const set = (key: string, value: string | boolean) => setDraft((d) => ({ ...d, [key]: value }) as Chip);
74  const text = (key: string, label: string, opts: { list?: string; mode?: "decimal" } = {}) => (
75    <label className="kb-cell">
76      <span className="cap-field-label">{label}</span>
77      <input
78        className="cap-input"
79        list={opts.list}
80        inputMode={opts.mode}
81        value={String((draft as Record<string, unknown>)[key] ?? "")}
82        onChange={(e) => set(key, e.target.value)}
83      />
84    </label>
85  );
86  const done = () => {
87    const name = draft.kind === "reagent" || draft.kind === "equipment" ? draft.name : draft.kind === "temperature" ? draft.low : "ok";
88    if (name.trim()) onDone(draft);
89  };
90  return (
91    <div
92      ref={box}
93      className="kb-popover"
94      role="dialog"
95      aria-label={`Edit ${PIECE_NAMES[chip.kind].toLowerCase()}`}
96      style={style}
97      onKeyDown={(e) => {
98        if (e.key === "Escape") {
99          e.preventDefault();
100          onCancel();
101        } else if (e.key === "Enter" && (e.target as HTMLElement).tagName === "INPUT" && (e.target as HTMLInputElement).type !== "checkbox") {
102          e.preventDefault();
103          done();
104        }
105      }}
106    >
107      <p className="kb-popover-title">{PIECE_NAMES[chip.kind]}</p>
108      <div className="kb-popover-fields">
109        {draft.kind === "reagent" ? (
110          <>
111            {text("name", "Reagent", { list: `${id}-reagents` })}
112            <datalist id={`${id}-reagents`}>
113              {names.reagent.map((n) => (
114                <option key={n} value={n} />
115              ))}
116            </datalist>
117            {text("shown", "Shown as (optional)")}
118            {text("amount", "Amount", { mode: "decimal" })}
119            {text("unit", "Unit", { list: `${id}-units` })}
120            <datalist id={`${id}-units`}>
121              {UNITS.map((u) => (
122                <option key={u} value={u} />
123              ))}
124            </datalist>
125            <label className="kb-check">
126              <input type="checkbox" checked={draft.fixed} onChange={(e) => set("fixed", e.target.checked)} /> Fixed: does not scale with the batch
127            </label>
128          </>
129        ) : draft.kind === "equipment" ? (
130          <>
131            {text("name", "Equipment", { list: `${id}-equipment` })}
132            <datalist id={`${id}-equipment`}>
133              {names.equipment.map((n) => (
134                <option key={n} value={n} />
135              ))}
136            </datalist>
137            {text("shown", "Shown as (optional)")}
138          </>
139        ) : draft.kind === "timer" ? (
140          <>
141            {text("label", "Label (optional)")}
142            {text("amount", "Duration", { mode: "decimal" })}
143            <label className="kb-cell">
144              <span className="cap-field-label">Unit</span>
145              <select className="cap-input" value={draft.unit} onChange={(e) => set("unit", e.target.value)}>
146                {[...new Set([...DURATIONS, draft.unit].filter(Boolean))].map((u) => (
147                  <option key={u}>{u}</option>
148                ))}
149              </select>
150            </label>
151          </>
152        ) : (
153          <>
154            {text("low", "Temperature, °C", { mode: "decimal" })}
155            {text("high", "Up to, °C (optional)", { mode: "decimal" })}
156          </>
157        )}
158      </div>
159      <div className="app-actions">
160        <Button type="button" size="sm" variant="primary" onClick={done}>
161          Done
162        </Button>
163        <Button type="button" size="sm" onClick={onRemove}>
164          Remove from the step
165        </Button>
166        <Button type="button" size="sm" variant="quiet" onClick={onCancel}>
167          Cancel
168        </Button>
169      </div>
170    </div>
171  );
172}
173
174/**
175 * The step text editor. `caret` holds where in the text the cursor last was, so an insert from the card lands there.
176 */
177export function StepText({
178  id,
179  label,
180  text,
181  names,
182  caret,
183  onChange,
184}: {
185  id: string;
186  label: string;
187  text: string;
188  names: { reagent: string[]; equipment: string[] };
189  caret: MutableRefObject<number | null>;
190  onChange: (text: string) => void;
191}) {
192  const root = useRef<HTMLDivElement>(null);
193  const wrap = useRef<HTMLDivElement>(null);
194  // What the editor's markup says now; the step's text from outside (an insert, a chip edit, a move) redraws it.
195  const own = useRef(text);
196  // One object for the editor's life: React writes the markup again whenever this object changes, which would wipe what
197  // is being typed, so after the first paint only redraw() writes it.
198  const [initial] = useState(() => ({ __html: chipHtml(text) }));
199  const [open, setOpen] = useState<{ at: number; chip: Chip; top: number; left: number } | null>(null);
200  const helpId = `${id}-help`;
201
202  const redraw = (next: string) => {
203    own.current = next;
204    if (root.current) root.current.innerHTML = chipHtml(next);
205  };
206  useLayoutEffect(() => {
207    if (text !== own.current) redraw(text);
208  }, [text]);
209
210  const changed = () => {
211    if (!root.current) return;
212    own.current = textOf(root.current);
213    onChange(own.current);
214  };
215
216  const openChip = (el: HTMLElement) => {
217    if (!root.current || !wrap.current) return;
218    const at = offsetAt(root.current, (r) => r.setEndBefore(el));
219    let start = 0;
220    const chip = stepPieces(own.current).find((p) => {
221      const hit = start === at && p.kind !== "text";
222      start += p.raw.length;
223      return hit;
224    }) as Chip | undefined;
225    if (!chip) return;
226    const width = wrap.current.clientWidth;
227    setOpen({ at, chip, top: el.offsetTop + el.offsetHeight + 6, left: Math.max(0, Math.min(el.offsetLeft, width - 304)) });
228  };
229
230  const replace = (at: number, length: number, words: string) => {
231    const before = own.current.slice(0, at);
232    const after = own.current.slice(at + length);
233    // A chip removed from between two words leaves one space, not two.
234    const next = words === "" && before.endsWith(" ") && after.startsWith(" ") ? `${before}${after.slice(1)}` : `${before}${words}${after}`;
235    redraw(next);
236    onChange(next);
237  };
238
239  const close = () => {
240    setOpen(null);
241    root.current?.focus();
242  };
243
244  return (
245    <div className="kb-chiptext-wrap" ref={wrap}>
246      <div
247        ref={root}
248        id={id}
249        className="cap-input kb-chiptext"
250        role="textbox"
251        aria-label={label}
252        aria-describedby={helpId}
253        contentEditable
254        spellCheck
255        dangerouslySetInnerHTML={initial}
256        onInput={changed}
257        onBlur={(e) => {
258          if (!root.current) return;
259          const sel = window.getSelection();
260          if (sel && sel.rangeCount > 0 && root.current.contains(sel.anchorNode)) {
261            const range = sel.getRangeAt(0);
262            caret.current = offsetAt(root.current, (r) => r.setEnd(range.endContainer, range.endOffset));
263          }
264          // Marks typed by hand become chips once the text is left; a chip taking the focus is still the text.
265          if (!root.current.contains(e.relatedTarget as Node | null) && !wrap.current?.querySelector(".kb-popover")?.contains(e.relatedTarget as Node | null)) {
266            redraw(own.current);
267          }
268        }}
269        onKeyDown={(e) => {
270          const target = e.target as HTMLElement;
271          if (target.classList.contains("kb-chip")) {
272            if (e.key === "Enter" || e.key === " ") {
273              e.preventDefault();
274              openChip(target);
275            } else if (e.key === "Backspace" || e.key === "Delete") {
276              e.preventDefault();
277              const at = offsetAt(root.current as HTMLElement, (r) => r.setEndBefore(target));
278              replace(at, target.dataset.raw?.length ?? 0, "");
279              root.current?.focus();
280            }
281            return;
282          }
283          // A step is one line.
284          if (e.key === "Enter") e.preventDefault();
285        }}
286        onClick={(e) => {
287          const chip = (e.target as HTMLElement).closest<HTMLElement>(".kb-chip");
288          if (chip) openChip(chip);
289        }}
290        onPaste={(e) => {
291          e.preventDefault();
292          document.execCommand("insertText", false, e.clipboardData.getData("text/plain").replace(/\s*\n\s*/g, " "));
293        }}
294      />
295      <p id={helpId} className="cap-sr-only">
296        Reagents, equipment, timers and temperatures are buttons in the text: press Enter on one to edit it, or Delete to remove it.
297      </p>
298      {open ? (
299        <ChipPopover
300          key={`${open.at}:${open.chip.raw}`}
301          chip={open.chip}
302          names={names}
303          style={{ top: open.top, left: open.left }}
304          onCancel={close}
305          onRemove={() => {
306            replace(open.at, open.chip.raw.length, "");
307            close();
308          }}
309          onDone={(chip) => {
310            const written = writePiece(chip);
311            // A chip nobody changed keeps the text it was read from.
312            if (JSON.stringify({ ...chip, raw: "" }) !== JSON.stringify({ ...open.chip, raw: "" })) replace(open.at, open.chip.raw.length, written);
313            close();
314          }}
315        />
316      ) : null}
317    </div>
318  );
319}