surwiki/templates/article_revision.html

<header>
<h1>{{title}}</h1>
</header>

<article>
<div class="rendered">
{{{rendered}}}
</div>
<div class="editor">
    <form action="" method="POST">
        <input type=hidden name=revision value="{{revision}}">
        <textarea autocomplete=off name=body>{{raw}}</textarea>
        <textarea autocomplete=off class="shadow-control"></textarea>
        <div class="editor-controls">
        <button type=submit>Save</button>
        </div>
    </form>
</div>
</article>

<footer>
<p><a id="openEditor" href="?editor=true">Edit</a></p>
<dl>
    <dt>Article ID</dt>
    <dd>{{article_id}}</dd>

    <dt>Revision</dt>
    <dd>{{revision}}</dd>

    <dt>Last updated</dt>
    <dd>{{created}}</dd>
</dl>
</footer>

<script>
function autosizeTextarea(textarea, shadow) {
    shadow.value = textarea.value;
    shadow.style.width = textarea.clientWidth + "px";
    shadow.style.height = "auto";
    textarea.style.height = shadow.scrollHeight + "px";
}

function openEditor() {
    const rendered = document.querySelector(".rendered");
    const editor = document.querySelector(".editor");
    const textarea = editor.querySelector('textarea[name="body"]');
    const shadow = editor.querySelector('textarea.shadow-control');

    editor.style.display = "block";

    autosizeTextarea(textarea, shadow);
    textarea.addEventListener('input', () => autosizeTextarea(textarea, shadow));
    window.addEventListener('resize', () => autosizeTextarea(textarea, shadow));

    rendered.style.display = "none";

    const form = editor.querySelector("form");
    form.addEventListener("submit", async function (ev) {
        ev.preventDefault();
        ev.stopPropagation();

        const response = await fetch(
            form.getAttribute("action"),
            {
                method: 'PUT',
                body: new FormData(form),
            }
        );
    });

    textarea.focus();
}

document
    .getElementById("openEditor")
    .addEventListener("click", function (ev) {
        ev.preventDefault();
        ev.stopPropagation();

        openEditor();
    })
</script>