Add or modify text/ content in contenteditable div without execCommand?

Question

The document.execCommand() has been obsoleted [DOC]. So, Making WYSIWYG editor is not that easy in 2020. After reading a lot of articles and answers I just find, Most of the answers (developers) prefer to use :

• document.createRange()
• window.getSelection()
• appendChild
• insertBefore
• nextSibling.
• replaceChild, etc

But how? They didn't give any example. I want to make the "Voldemort" word bold after clicking on the B button. I just need an idea of the workflow.

<div class="block-editor">
  <!-- editor control -->
  <div class="block-editor-control">
    <ul>
      <li data-action="bold"> B </li>
    </ul>
  </div>

  <!-- editor content's -->
  <div class="block-editor-content">
    <div class="block-editor-block" contenteditable="true" role="group">
       Voldemort is back
    </div>
  </div>
</div>

Answer 1

First, detect Ctrl+B key press (keypress, ctrl+c (or some combo like that)). After that:

1. Get the selection range: https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection.
2. Insert <span> at beginning of the range, and insert </span> at the end of the range
3. Set the span element's font weight to bold.