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

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>