<script src="../include.js"></script>
<div id="text" contenteditable="true"></div>
<script>
    test(() => {
        let text = document.getElementById("text");
        text.focus();

        let hello = text.appendChild(document.createTextNode("Hello, world!"));

        let boldText = document.createTextNode("I'm totally bold rn");
        let boldTag = text.appendChild(document.createElement("b"));
        boldTag.appendChild(boldText);

        // select the text
        let range = document.createRange();
        range.selectNodeContents(hello);
        let selection = window.getSelection();
        selection.removeAllRanges();
        selection.addRange(range);

        let e = document.execCommand("bold", false, "on");
        println(`execCommand("bold") returned ${e}`);
        let allTheText = text.innerHTML;
        println(allTheText);

        println(`queryCommandEnabled("bold") returned ${document.queryCommandEnabled("bold")}`);
        println(`queryCommandIndeterm("bold") returned ${document.queryCommandIndeterm("bold")}`);
        println(`queryCommandState("bold") returned ${document.queryCommandState("bold")}`);
        println(`queryCommandSupported("bold") returned ${document.queryCommandSupported("bold")}`);
        println(`queryCommandValue("bold") returned "${document.queryCommandValue("bold")}"`);
    });
</script>