Formatting buttons for contentEditable reflect selection formatting
<p>We have a <code>contenteditable="true"</code> div which we use as a wysiwyg text editor. We added a basic formatting toolbar similar to the one that uses Medium.com</p>

<p><a href="https://i.stack.imgur.com/Qowow.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Qowow.png" alt="enter image description here"></a></p>

<p>Using <code>execCommand()</code>, we're able to make the selected text bold if, for instance, the user presses the <code>bold</code> button. This works great.</p>

<p>However, something we haven't managed to do yet is to make the <code>bold</code> button highlighted if the user selects a part of the text which is in bold, like illustrated in the picture above. This could be easily done by passing a <code>is-active</code> class on the button of course, but <em>how do we <strong>know</strong> that the selected text is, in this case, bold</em>?</p>

<p>We think it could perhaps be done using the <code>Selection</code> API but this use case seems undocumented.</p>