JSFiddle - React, Tailwind, and code Playground

HTML

<div id="toolbar">
    <button id="doSomethingButton">Do Something</button>
</div>
<div id="editor" contenteditable="true">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed arcu ultrices, bibendum mauris vitae, eleifend elit. Donec ac ipsum accumsan, gravida orci commodo, tristique lectus. Nullam elementum aliquet lorem, sit amet auctor tellus pharetra a. Proin dignissim dolor felis. Integer ut lobortis nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</div>

JavaScript

var button = document.getElementById('doSomethingButton');
var editor = document.getElementById('editor');

button.addEventListener('click', doSomething);
editor.addEventListener('drop', userDidDrop);

function doSomething(event) {
    event.preventDefault();


    document.execCommand('insertHTML', null, '<b>Drop</b>');
}

function userDidDrop(event) {
    event.preventDefault();
    if (document.caretRangeFromPoint) {
        range = document.caretRangeFromPoint(event.clientX, event.clientY);
    } else if (document.caretPositionFromPoint) {
        rangePos = document.caretPositionFromPoint(event.clientX, event.clientY);
        range = document.createRange();
        range.setStart(rangePos.offsetNode, rangePos.offset);
        range.collapse(true);
    } else if (document.body.createTextRange) {
        var range = document.body.createTextRange();
        range.moveToPoint(event.clientX, event.clientY);
        range.select();
    }
    window.getSelection().removeAllRanges()
    window.getSelection().addRange(range)

    document.execCommand('insertHTML', null, '<b>Drop</b>');
}