Auto-convert on typing

[waldyrious]

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:

rst-playground/index.xhtml

Line 15 in da5c919

<!-- <form oninput="html_output.value=rst_input.value"> -->

Note: converting the text automatically would probably require some sort of throttle to prevent running the conversion on every keystroke.

[waldyrious]

Here's what the Djot playground uses:

<textarea id="input" autofocus placeholder="Type some djot here..."></textarea>

(https://github.com/jgm/djot/blob/52c15583dc1982adb8a32314e99344e1464e29d0/web/playground/index.html#L43)

and:

const input = document.getElementById("input");
input.onkeyup = debounce(parse_and_render, 400);

(https://github.com/jgm/djot/blob/52c15583dc1982adb8a32314e99344e1464e29d0/web/playground/index.js#L133-L134)

and:

const debounce = (func, delay) => {
    let debounceTimer
    return function() {
        const context = this
        const args = arguments
            clearTimeout(debounceTimer)
                debounceTimer
            = setTimeout(() => func.apply(context, args), delay)
    }
}

(https://github.com/jgm/djot/blob/52c15583dc1982adb8a32314e99344e1464e29d0/web/playground/index.js#L201-L210)

[waldyrious]

And here's the code from Pygment's demo:

textarea.addEventListener('input', debouncedUpdate);

(https://github.com/pygments/pygments/blob/f0afb01195b5890ad7758554c23308db01a45be1/doc/_static/demo.js#L67)

and:

function debouncedUpdate() {
    if (fileInput.files.length > 0)
        return;


    if (textarea.value.length < 1000) {
        highlightShortDebounce();
    } else {
        highlightLongDebounce();
    }
}

(https://github.com/pygments/pygments/blob/f0afb01195b5890ad7758554c23308db01a45be1/doc/_static/demo.js#L55-L64)

and:

const highlightShortDebounce = debounce(highlight, 50);
const highlightLongDebounce = debounce(highlight, 500);

(https://github.com/pygments/pygments/blob/f0afb01195b5890ad7758554c23308db01a45be1/doc/_static/demo.js#L52-L53)

and:

function debounce(func, timeout) {
    let timer;
    return (...args) => {
        clearTimeout(timer);
        timer = setTimeout(() => func.apply(this, args), timeout);
    };
}

(https://github.com/pygments/pygments/blob/f0afb01195b5890ad7758554c23308db01a45be1/doc/_static/demo.js#L44-L50)

For reference, this functionality was introduced in pygments/pygments@fe3d2fc (#1999).