如何仅在我的 contenteditable div内而不是当用户在整个页面上的其他位置单击时，如何检测某项是否为粗体？

Here's my JSFiddle with the code.

我正在尝试运行 document.queryCommandState（“ bold”），但仅适用于我的 contenteditable =“ true” div。

我已经搜索了一段时间，找不到任何东西。我尝试以几种不同的方式将div选择器 $（“。text-editor”）替换/添加到 document 一词中，但这是行不通的。我觉得我缺少明显的东西。谢谢！

HTML：

<div contenteditable="true" class="text-editor">Content <b>editable</b>. Type here...</div>

<div class="normal-div">Content <b>not</b> editable.</div>

Click on the bold (and not bold) text in the two boxes. Result:
<div class="is-bold">The text your cursor's on is BOLD.</div>

<div class="is-not-bold">The text your cursor's on is NOT BOLD.</div>

<br>^^ I want this green result to only change when you're clicking inside the editable box.

CSS：

.text-editor {
  border: 2px solid red;
  margin-bottom: 10px;
}

.normal-div {
  border: 2px solid blue;
  margin-bottom: 10px;
}

.is-bold {
  display: none;
  color: green;
}

.is-not-bold {
  display: none;
  color: green;
}

.active {
  display: block;
}

jQuery：

setInterval(function () {
    var isItBold = document.queryCommandState("bold");
    if (isItBold == true) { 
    $(".is-bold").addClass("active");
    $(".is-not-bold").removeclass("active"); 
  }
  else { 
    $(".is-bold").removeclass("active");
    $(".is-not-bold").addClass("active"); 
  }
},100)