Alternative/substitute for queryCommandState('bold')

Question

I created a rich content editor based on execCommand and queryCommandState whose are now obsolete. I'm looking for a substitute to these commands, especially for

document.queryCommandState('bold')

I think the following is a good start:

window.getSelection().getRangeAt(0);

I get the current selection, but I can't figure out if the selection is in bold <b> or not.

Answer 1

It can be done with window.getSelection()

JSFiddle: https://jsfiddle.net/Imabot/s54zoxk2/

Explanations: https://lucidar.me/en/rich-content-editor/lightweight-rich-content-editor-part-2-check-if-bold/

Hope this will help others...

Answer 2

You could get all computed styles of the node and then check the value of your propertie.

function getComputedStyles(currentNode) {
    if(currentNode.id != maxTreeNodeId) {
        try {
            var styles = window.getComputedStyle(currentNode);
            console.log(styles.fontWeight); // Print font weight, 700 = bold
        } catch(err) {
            this.getComputedStyles(currentNode.parentNode);
        }
    }
}