document.execCommand('bold') not working in react js

Question

REACT JS : im trying to make simple editor for my project , which can make text bold , italic and underline

im using contentEditable

<div className="inputBox" contentEditable>some text here to play with</div> 

and im using a button just above it to make text bold

<div className="button' onClick={this.buttonCLick.bind(this)}>BOLD</div>

which calls this onclick

buttonCLick(){
        let isWorking = document.execCommand('bold',false,'');
        console.log('isWorking:', isWorking);
    }

but the " isWorking " return false every time and nothing happns to selected text .

Answer 1

What browser shows this behavior? Have you tried that on different browser?

Eg on Firefox you must make sure that default font-weight is 400 ( https://bugzilla.mozilla.org/show_bug.cgi?id=948411 ). Here I have have reported documentation bug for Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=1515267

Another exotic case seems to be this, but I have not reproduced that: Why doesn't the document.execCommand work when I click on a div? but