document.execCommand and document.queryCommandState doesn’t work in Svelte

I want to create a text editor, but there are some confusing problems that have come up :

• The text formatting doesn’t work unless text is selected first
• The color change on the buttons when the formatting is active sometimes works and sometimes doesn’t. I’ve tried three methods : wrapping it in a function didn’t work, adding an arrow function () => in the onClick makes the color appear active even before I click, and when I do click, it doesn’t change. Using document.queryCommandState directly without wrapping in a function didn’t work either.

And is using bind:innerHTML as I did safe for security? If it’s not safe, what is the safe way?

<script>
    function formatText(command){
        document.execCommand(command, false, null);
    }
    
    function isFormatActive(command){
        return document.queryCommandState(command);
    }
</script>

<div class="bg-black text-white font-lg font-bold">
    <button class:bg-emerald-950={isFormatActive("italic")} on:click={() => formatText("italic")} class="p-4">
        <i>I</i>
    </button>
    <button class:bg-emerald-950={() => isFormatActive('bold')} on:click={() => formatText('bold')} class="p-4">
        <b>B</b>
    </button>
    <button class:bg-emerald-950={document.queryCommandState('underline')} on:click={() => formatText('underline')} class="p-4">
        <u>U</u>
    </button>
</div>
<div class="bg-emerald-500 text-white p-4 rounded-lg focus:border-none focus:outline-none" contenteditable="true">hello</div>