Open waldyrious opened 1 year ago
Here's what the Djot playground uses:
<textarea id="input" autofocus placeholder="Type some djot here..."></textarea>
and:
const input = document.getElementById("input");
input.onkeyup = debounce(parse_and_render, 400);
and:
const debounce = (func, delay) => {
let debounceTimer
return function() {
const context = this
const args = arguments
clearTimeout(debounceTimer)
debounceTimer
= setTimeout(() => func.apply(context, args), delay)
}
}
And here's the code from Pygment's demo:
textarea.addEventListener('input', debouncedUpdate);
and:
function debouncedUpdate() {
if (fileInput.files.length > 0)
return;
if (textarea.value.length < 1000) {
highlightShortDebounce();
} else {
highlightLongDebounce();
}
}
and:
const highlightShortDebounce = debounce(highlight, 50);
const highlightLongDebounce = debounce(highlight, 500);
and:
function debounce(func, timeout) {
let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => func.apply(this, args), timeout);
};
}
For reference, this functionality was introduced in pygments/pygments@fe3d2fc
(#1999).
Instead of a "Run" button, we should simply convert the text automatically whenever the input changes. The experience should be similar to this (incomplete) rST converter: https://seikichi.github.io/restructured/.
One way to achieve this could be using the
onsubmit
attribute of the form, as was done in an early version of the code that got commented out as the remaining pieces were being set in place:https://github.com/waldyrious/rst-playground/blob/da5c9192f91cb764a71ce734daceea3e59f050c4/index.xhtml#L15
Note: converting the text automatically would probably require some sort of throttle to prevent running the conversion on every keystroke.