fix(viewer): prevent IME composition interruption in search inputs

[jonathanzhan1975]

Problem

The viewer's five search inputs — graph (#graph-search), memories (#mem-search), and the lessons/actions/crystals filters — destroy and recreate the focused input element via innerHTML on every keystroke. This interrupts any active IME composition session, making non-Latin input (Chinese pinyin, Japanese kana-kanji, Korean hangul) effectively impossible: the candidate window keeps closing before the user can commit a character.

While investigating I also noticed that the viewer's CSP includes:

script-src-attr 'none'

(see src/viewer/document.ts / buildViewerCsp). This silently blocks the inline oninput="..." handlers on the lessons/actions/crystals panels and the onchange="..." on the actions status <select>. Under the strict CSP, those three search controls and the status filter have been non-functional — the inline handlers never run. The user just sees a search box that does nothing.

Fix

This PR adds two small helpers and migrates all five search inputs to use them. No framework, no render-layer refactor, no behavior change for ASCII users.

bindImeSafeSearch(input, ms, onSearch)

Guards on both an explicit compositionstart/compositionend flag and event.isComposing, because engine-specific event ordering differs between Chromium/Firefox/Safari and you can't rely on either signal alone (per MDN InputEvent.isComposing and the compositionend spec).

compositionend triggers an immediate commit (so the user sees the filter result without a 200ms delay after every IME selection). A one-shot justCommitted flag suppresses the redundant trailing input event that browsers dispatch after compositionend, avoiding a duplicate render.

captureSearchFocus(ids) / restoreSearchFocus(focus)

Records activeElement.id, selectionStart, selectionEnd immediately before each innerHTML = html, then restores focus and cursor position after re-binding listeners. The guard checks activeElement.id is in the managed list before saving, so we never steal focus from anywhere else.

Without this, even after fixing the IME interrupt, multi-word Chinese input still required clicking back into the search box after every committed word.

Migrated controls

All five search inputs and the actions status <select> are migrated to addEventListener via the helpers above, with a unified 200ms debounce.

Panel	Element	Before	After
Graph	#graph-search	addEventListener('input', debounce(..., 150))	bindImeSafeSearch(..., 200, ...) + focus restore
Memories	#mem-search	addEventListener('input', debounce(..., 200))	bindImeSafeSearch(..., 200, ...) + focus restore
Lessons	.search-input → #lessons-search	inline oninput= (CSP-blocked)	bindImeSafeSearch(..., 200, ...) + focus restore
Actions	.search-input → #actions-search	inline oninput= (CSP-blocked)	bindImeSafeSearch(..., 200, ...) + focus restore
Actions filter	<select> → #actions-status-filter	inline onchange= (CSP-blocked)	addEventListener('change', ...)
Crystals	.search-input → #crystals-search	inline oninput= (CSP-blocked)	bindImeSafeSearch(..., 200, ...) + focus restore

The patch carries an // IME_SAFE_SEARCH_V2 marker comment for quick grep verification.

Verification

Synthetic regression (Node + jsdom + synthetic CompositionEvent/InputEvent): 8/8 pass

• ASCII typing debounces and commits once
• IME composition: no commit during composing
• IME composition: immediate commit on compositionend
• justCommitted suppresses the trailing input event (single commit)
• Post-IME ASCII typing resumes debounced commits
• Composition cancel returns to idle
• Fast typing coalesces into a single commit

Manual browser (Windows 11 + Chrome): 8/8 pass

• Chinese pinyin commit works (memories, graph, lessons, actions, crystals)
• Multi-word Chinese input retains focus across commits — no click-back required
• English search debounces as before
• Cursor position preserved (abc → cursor between a and b → type X → result aXbc)
• DevTools Console shows 0 script-src-attr CSP violations after the fix (previously had violations on every lessons/actions/crystals interaction)
• Actions <select> change handler binds correctly

What this PR explicitly does not do

• No framework introduction (no React/Vue/lit, etc.)
• No keyed reconciliation, no virtual DOM
• No changes to the render functions' overall structure (still innerHTML-based)
• No CSP changes — the CSP was already correct; the inline handlers were the regression

Risk surface

• Focus restoration runs el.focus() after each managed render. This is gated on activeElement.id matching a managed input, so it can't steal focus from elsewhere on the page.
• setSelectionRange is wrapped in try/catch to defend against future input types that might reject it (e.g., type="number" doesn't support it).
• The setTimeout(..., 0) to clear justCommitted runs as a microtask after the next event-loop tick, which is the same tick where the trailing post-compositionend input event fires — so the suppression window is tight but reliable across the browsers I tested.

🤖 Generated with Claude Code

Summary by CodeRabbit

• Bug Fixes
  • Improved search functionality for composition-based input methods (IME), preventing accidental searches during text composition
  • Enhanced focus and selection preservation in search inputs when navigating between tabs

[vercel]

@jonathanzhan1975 is attempting to deploy a commit to the rohitg00's projects Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 9dd4f20a-d9fa-49e5-80d8-5dab127eb3f1

📥 Commits

Reviewing files that changed from the base of the PR and between f1e7b2c and 28dd125.

📒 Files selected for processing (1)

• src/viewer/index.html

---

📝 Walkthrough

Walkthrough

This PR adds IME-safe input handling to prevent premature searches during text composition. Three helper functions manage composition detection, debounced search, and focus/selection preservation. All five search tabs are then updated to use these utilities while maintaining caret position across re-renders.

Changes

IME-safe search input handling

Layer / File(s)	Summary
IME-safe search utilities and focus preservation src/viewer/index.html	Adds bindImeSafeSearch to defer debounced search callbacks until composition ends, captureSearchFocus to record element and selection state, and restoreSearchFocus to restore caret/selection after re-renders.
Tab search wiring with IME-safe binding src/viewer/index.html	Graph, Memories, Lessons, Actions, and Crystals tabs remove inline event attributes and wire search inputs through bindImeSafeSearch with focus capture/restoration to prevent caret loss during IME composition.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 When characters compose before they're born,
IME-safe helpers keep the search forlorn—
Debounce waits patient, focus restored bright,
Five tabs now handle composition just right!

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and specifically describes the main change: preventing IME composition interruption in search inputs, which is the core problem being fixed.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[rohitg00]

Merged + shipping in next release.

Thanks @jonathanzhan1975 for the IME composition guard — clean fix for CJK users hitting mid-character interruption on the viewer search inputs.