execCommand bold don't toggle in firefox

Question

in FireFox, I can set the selection bold, but when I click one time more, the selected bold text dont unbolding...

How to fix this?

Normal (Dont work):

document.execCommand("bold", false, null); 
/
document.execCommand("bold", false, "");

My Try (dont work also):

if (document.queryCommandState("bold")) {
        document.execCommand("insertHTML", false, ""+ document.getSelection()+"");
    } else {
    
    document.execCommand("insertHTML", false, "<b>"+ document.getSelection()+"</b>");
        
    }

Answer 1

Tested and Passed on Chrome and Firefox

execComand('bold'... Toggles the style on and off of a selected part of text.

So to trigger toggling, use execCommand() in a callback function of an Event Handler that is registered for a "toggling" type of event such as: click,dblclick,mousedown/up, etc..

The execCommand() is a versatile yet specialized Document Extension in that most commands (methods?) rely on selected text, clicking events, keystrokes, etc. Basically, execCommand() is a text editor so when utilizing it, keep in mind the interface has a strong association to aspects involving text formatting and editing.

The following Demo has:

1. An onclick Event Attribute that toggles "bold" command.
2. An EventListener registered to the "double-click (dblclick)" event. It toggles the "italic" command.
3. An onmousedown Property Event Handler which toggles the "underline" command.

---

Demo

// double-click EventListener 
document.getElementById('I').addEventListener('dblclick', function(e) {
  document.execCommand('italic', false, null);
});

// mousedown Property Event Handler
document.getElementById('U').onmousedown = function(e) {
  document.execCommand('underline', false, null);
};

#editor1 {
  height: 100px;
  border: 3px inset grey
}

<div id="editor1" contenteditable="true">
  The quick brown fox jumped over the lazy dog.
</div>

<fieldset>

  <button id='I' class="fontStyle" title="Italicize Highlighted Text"><i>I</i>
    </button>

  <!-- click on Event Attribute -->
  <button class="fontStyle" onclick="document.execCommand( 'bold',false,null);" title="Bold Highlighted Text"><b>B</b>
    </button>

  <button id="U" class="fontStyle" title="Underline Highlighted Text"><u>U</u>
    </button>

</fieldset>