JSFiddle - React, Tailwind, and code Playground

by Chris Nielsen

HTML

<div id="editable" contenteditable="true">Typing a brace here works --
    <br> but not here --
    <br>footer
    <br>
</div>

CSS

#editable {
    width: 300px;
    height:300px;
}

JavaScript

function insertChar(char) {
    var range, textNode;
    range = window.getSelection().getRangeAt(0);
    if (range.startContainer.nodeType === Node.TEXT_NODE) {
        range.startContainer.insertData(range.startOffset, char);
    }
}

function handleKeyUp(e) {
    e = e || window.event;

    var char, keyCode;
    keyCode = e.keyCode;

    char =
        (e.shiftKey ? {
            "222": '"',
            "57":  ')',
            "219": '}'
        } : {
            "219": "]"
        })[keyCode] || null;

    if (char) {
        insertChar(char);
    }
}

document.getElementById("editable").onkeyup = handleKeyUp;