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
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:
+7
-2
@@ -357,12 +357,17 @@ function togglePreview() {
|
||||
|
||||
if (isPreviewEnabled) {
|
||||
preview.innerHTML = parseMarkdown(textarea.value);
|
||||
textarea.addEventListener('input', updatePreview);
|
||||
textarea.addEventListener('input', debouncedUpdatePreview);
|
||||
} 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() {
|
||||
const textarea = document.getElementById('newComment');
|
||||
const previewDiv = document.getElementById('markdownPreview');
|
||||
|
||||
Reference in New Issue
Block a user