Debounce the live markdown preview (#108)
Lint / PHP (phpcs PSR-12) (push) Successful in 28s
Lint / JS (eslint) (push) Successful in 10s
Lint / PHP requirements (version + extensions) (push) Successful in 31s
Lint / Notify on failure (push) Skipped
Security / PHP Security (semgrep) (push) Successful in 1m31s
Lint / Deploy (push) Successful in 2s

updatePreview() was bound directly to the comment textarea's 'input'
event with no debounce, re-running the full markdown parser (regex
passes for headings, tables, links, footnotes, etc.) on every single
keystroke.

Wrapped it with the existing lt.debounce() helper (150ms) — the
initial preview render on enabling the toggle still happens
immediately; only the per-keystroke live updates are debounced.
Verified via jsdom with real timers: 10 rapid keystrokes within the
debounce window produce exactly one parse call instead of ten.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Lhz7pGMaoTfL5sdYS5XiKv
This commit is contained in:
2026-09-11 14:28:39 -04:00
co-authored by Claude Sonnet 5
parent a4828c1b7b
commit 6bd1bb082a
+7 -2
View File
@@ -357,12 +357,17 @@ function togglePreview() {
if (isPreviewEnabled) { if (isPreviewEnabled) {
preview.innerHTML = parseMarkdown(textarea.value); preview.innerHTML = parseMarkdown(textarea.value);
textarea.addEventListener('input', updatePreview); textarea.addEventListener('input', debouncedUpdatePreview);
} else { } else {
textarea.removeEventListener('input', updatePreview); textarea.removeEventListener('input', debouncedUpdatePreview);
} }
} }
// Re-running the full markdown parser on every single keystroke is wasted
// work while the user is still mid-word; 150ms debounce keeps the preview
// feeling live without re-parsing on every keystroke.
const debouncedUpdatePreview = window.lt ? lt.debounce(updatePreview, 150) : updatePreview;
function updatePreview() { function updatePreview() {
const textarea = document.getElementById('newComment'); const textarea = document.getElementById('newComment');
const previewDiv = document.getElementById('markdownPreview'); const previewDiv = document.getElementById('markdownPreview');