mAi: #92 - t-paliad-261 — submission-draft autosave focus + click-variable-in-preview jump

Two related editor polish fixes. (A) Autosave-refresh focus preservation paintVariables() replaces every input via innerHTML, blowing away the focused-input reference and dropping the cursor mid-edit. Fix: capture the active variable input's data-var key + selectionStart/ End/Direction before the repaint, restore on the new element after (by data-var lookup + setSelectionRange). Cursor stays put across autosave, rename, and reset cycles. Works for <input> and <textarea> via the shared selectionRange contract. (B) Click variable in preview → jump to sidebar input Go renderer wraps every substituted placeholder value in the HTML preview with <span class="draft-var" data-var="key">…</span>. Implemented via a valueWrapperFn plumbed through substituteInDocumentXML → substituteInTextNodes / substituteAcrossRuns → replacePlaceholders. RenderHTML passes htmlPreviewWrapper which marks values with three PUA sentinels (U+E100/U+E101/U+E102) that emitTextWithDraftVars converts to the span pair inside docXMLToHTML. Missing-marker text is wrapped too so a clicked [KEIN WERT: foo] jumps to the empty field. Render() (.docx export) passes nil for wrap → output is byte- identical to pre-261. New test TestRender_DocxOutputUnchangedByPreviewWrap asserts the .docx never carries draft-var/data-var markup or PUA sentinels. Client wireDraftVars() adds .draft-var--has-input only to spans whose key resolves to a sidebar input — derived variables (e.g. today.iso) stay non-clickable. Click handler: scrollIntoView(smooth, center) → focus + select after 50ms → 1.2s lime flash on the row. Keyboard accessible (Enter / Space) with role=button + aria-label. CSS adds a subtle lime tint to every .draft-var so the user sees what was substituted; --has-input layers cursor: pointer + brighter hover background. Flash animation respects prefers-reduced-motion via a steps(1, end) fallback. Tests: TestRenderHTML_ExtractsParagraphsAndFormatting updated to assert the new span wrap. New tests for missing-marker wrap + .docx-path-untouched. Go + frontend builds clean.
2026-05-25 15:12:10 +02:00
parent ef21e43375
commit 7e66da8def
4 changed files with 360 additions and 21 deletions
--- a/frontend/src/client/submission-draft.ts
+++ b/frontend/src/client/submission-draft.ts
@@ -605,6 +605,90 @@ function paintPreview(): void {
  const host = document.getElementById("submission-draft-preview");
  if (!host || !state.view) return;
  host.innerHTML = state.view.preview_html ?? "";
+  wireDraftVars(host);
+}
+
+// t-paliad-261 (B) — click a substituted variable in the preview to
+// jump to the matching sidebar input. Re-wires on every paintPreview
+// since the preview HTML is replaced wholesale. The server side wraps
+// each substituted placeholder (resolved OR missing marker) in
+// <span class="draft-var" data-var="<key>">…</span>; clicks here scroll
+// the corresponding input into view, focus + select, and flash the row.
+// If the key has no matching sidebar input (derived variables not
+// exposed in VARIABLE_GROUPS), the click is a silent no-op — the span
+// is still rendered so the user gets the visible hint that this is a
+// resolved variable.
+function wireDraftVars(previewHost: HTMLElement): void {
+  previewHost.querySelectorAll<HTMLElement>(".draft-var").forEach((el) => {
+    const key = el.dataset.var;
+    if (!key) return;
+    if (findVarInput(key)) {
+      el.classList.add("draft-var--has-input");
+      el.setAttribute("role", "button");
+      el.setAttribute("tabindex", "0");
+      el.setAttribute(
+        "aria-label",
+        (isEN() ? "Edit variable " : "Variable bearbeiten: ") + labelFor(key),
+      );
+    }
+    el.addEventListener("click", (ev) => onDraftVarClick(key, ev));
+    el.addEventListener("keydown", (ev) => {
+      if (ev.key === "Enter" || ev.key === " ") {
+        ev.preventDefault();
+        onDraftVarClick(key, ev);
+      }
+    });
+  });
+}
+
+function findVarInput(key: string): HTMLInputElement | null {
+  const host = document.getElementById("submission-draft-variables");
+  if (!host) return null;
+  return host.querySelector<HTMLInputElement>(
+    `.submission-draft-var-input[data-var="${cssEscape(key)}"]`,
+  );
+}
+
+function cssEscape(s: string): string {
+  // CSS.escape covers our placeholder keys ([A-Za-z][A-Za-z0-9_.]*) but
+  // older browsers may lack it; defensive fallback escapes characters
+  // CSS treats as special. Placeholder keys never carry whitespace or
+  // quotes so escaping is straightforward.
+  if (typeof CSS !== "undefined" && typeof CSS.escape === "function") {
+    return CSS.escape(s);
+  }
+  return s.replace(/([!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~])/g, "\\$1");
+}
+
+function onDraftVarClick(key: string, ev: Event): void {
+  const input = findVarInput(key);
+  if (!input) return;
+  ev.preventDefault();
+  ev.stopPropagation();
+  // Smooth-scroll the input into view, then focus on the next tick so
+  // the scroll animation has started and the focus call doesn't trigger
+  // a second jarring jump.
+  input.scrollIntoView({ behavior: "smooth", block: "center" });
+  window.setTimeout(() => {
+    input.focus();
+    try {
+      input.select();
+    } catch {
+      /* select() throws on number/email inputs; safe to ignore */
+    }
+  }, 50);
+  flashVarRow(input);
+}
+
+function flashVarRow(input: HTMLElement): void {
+  const row = input.closest<HTMLElement>(".submission-draft-var-row");
+  if (!row) return;
+  row.classList.remove("submission-draft-var-row--flash");
+  // Force reflow so removing+re-adding the class restarts the animation
+  // even on rapid successive clicks.
+  void row.offsetWidth;
+  row.classList.add("submission-draft-var-row--flash");
+  window.setTimeout(() => row.classList.remove("submission-draft-var-row--flash"), 1200);
 }

 // ─────────────────────────────────────────────────────────────────────
@@ -643,11 +727,18 @@ async function flushAutosave(): Promise<void> {
  if (!state.pendingOverrides) return;
  const payload = { variables: state.pendingOverrides };
  state.pendingOverrides = null;
+  // t-paliad-261 (A) — paintVariables() below replaces every input in
+  // the sidebar via innerHTML, which blows away the active-element
+  // reference. Capture the focused input's key + selection range before
+  // the repaint and restore on the new element after, so the user can
+  // keep typing without clicking back into the field.
+  const focusSnap = captureVarFocus();
  try {
    const view = await patchDraft(payload);
    state.view = view;
    paintVariables();
    paintPreview();
+    restoreVarFocus(focusSnap);
    setSaveStatus(isEN() ? "Saved" : "Gespeichert");
  } catch (err) {
    if ((err as Error).name === "AbortError") return;
@@ -656,6 +747,64 @@ async function flushAutosave(): Promise<void> {
  }
 }

+// captureVarFocus / restoreVarFocus — focus-preservation across the
+// paintVariables() innerHTML-replace cycle (t-paliad-261 part A).
+// Tracks selection start/end/direction so the cursor lands exactly
+// where it was before the repaint, including any active selection
+// range. Handles both <input> and <textarea> via the shared
+// HTMLInputElement|HTMLTextAreaElement contract for selectionStart /
+// selectionEnd / selectionDirection / setSelectionRange.
+
+interface VarFocusSnapshot {
+  key: string;
+  start: number | null;
+  end: number | null;
+  dir: "forward" | "backward" | "none";
+}
+
+type SelectableEl = HTMLInputElement | HTMLTextAreaElement;
+
+function isVarField(el: Element | null): el is SelectableEl {
+  if (!el) return false;
+  if (!(el instanceof HTMLInputElement) && !(el instanceof HTMLTextAreaElement)) {
+    return false;
+  }
+  return el.classList.contains("submission-draft-var-input");
+}
+
+function captureVarFocus(): VarFocusSnapshot | null {
+  const active = document.activeElement;
+  if (!isVarField(active)) return null;
+  const key = active.dataset.var;
+  if (!key) return null;
+  return {
+    key,
+    start: active.selectionStart,
+    end: active.selectionEnd,
+    dir: (active.selectionDirection as "forward" | "backward" | "none" | null) ?? "forward",
+  };
+}
+
+function restoreVarFocus(snap: VarFocusSnapshot | null): void {
+  if (!snap) return;
+  const host = document.getElementById("submission-draft-variables");
+  if (!host) return;
+  const next = host.querySelector<SelectableEl>(
+    `.submission-draft-var-input[data-var="${cssEscape(snap.key)}"]`,
+  );
+  if (!next) return;
+  next.focus();
+  if (snap.start !== null && snap.end !== null) {
+    try {
+      next.setSelectionRange(snap.start, snap.end, snap.dir);
+    } catch {
+      /* setSelectionRange throws on inputs whose type doesn't support
+         selection ranges (number, email, etc.); safe to ignore — the
+         focus() call above is enough for those. */
+    }
+  }
+}
+
 async function renameDraft(newName: string): Promise<void> {
  setSaveStatus(isEN() ? "Saving…" : "Speichert…");
  try {
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -5880,6 +5880,66 @@ dialog.modal::backdrop {
    font-style: italic;
 }

+/* t-paliad-261 (B) — substituted variables in the preview are wrapped
+   in <span class="draft-var" data-var="…"> by the Go HTML renderer.
+   .draft-var by itself shows a subtle dotted underline so the lawyer
+   can SEE which text was filled in from a variable. .draft-var--has-input
+   (added client-side when a matching sidebar input exists) layers on
+   the clickable affordance — pointer cursor + brighter hover background.
+   Non-matching draft-vars (derived variables not exposed in the
+   sidebar) stay visually distinct but non-interactive. */
+.draft-var {
+    background-color: rgba(198, 244, 28, 0.12);
+    border-radius: 2px;
+    padding: 0 2px;
+    box-decoration-break: clone;
+    -webkit-box-decoration-break: clone;
+    transition: background-color 0.15s ease;
+}
+
+.draft-var--has-input {
+    cursor: pointer;
+}
+
+.draft-var--has-input:hover,
+.draft-var--has-input:focus-visible {
+    background-color: rgba(198, 244, 28, 0.45);
+    outline: none;
+}
+
+/* t-paliad-261 (B) — brief lime flash on the sidebar row after a
+   click-jump from the preview, so the user's eye lands on the right
+   input even after the smooth-scroll motion. Animation restarts on
+   each click via class-remove + reflow + class-add. */
+.submission-draft-var-row--flash {
+    animation: paliad-var-flash 1.2s ease;
+    border-radius: 4px;
+}
+
+@keyframes paliad-var-flash {
+    0% {
+        background-color: rgba(198, 244, 28, 0.55);
+        box-shadow: 0 0 0 4px rgba(198, 244, 28, 0.25);
+    }
+    100% {
+        background-color: transparent;
+        box-shadow: 0 0 0 4px transparent;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .submission-draft-var-row--flash {
+        animation: paliad-var-flash-still 1.2s steps(1, end);
+    }
+    @keyframes paliad-var-flash-still {
+        0%, 99% { background-color: rgba(198, 244, 28, 0.55); }
+        100% { background-color: transparent; }
+    }
+    .draft-var {
+        transition: none;
+    }
+}
+
 .submission-edit-btn {
    margin-right: 0.4rem;
 }