JSFiddle - React, Tailwind, and code Playground

HTML

<div id="editor">
    <div id="title" class="content" contenteditable="true"></div>
    <div id="body" class="content" contenteditable="true"></div>
</div>

CSS

.content {
    border: 1px solid #000;
    
    font-size: 40px;
}

JavaScript

$(function () {
    $("#editor").on("keyup", ".content", function () {
        var target = this;
        var selection = window.getSelection();
        var range = selection.getRangeAt(0);
        var startOffset = range.startOffset;
        var endOffset = range.endOffset;
        var html = $(target).html();
        var newHtml = html.replace(/'\b/g, "\u2018") // opening single
        .replace(/\b'/g, "\u2019") // closing single
        .replace(/"\b/g, "\u201c") // opening double
        .replace(/\b"/g, "\u201d") // closing double
        .replace(/--/g, "\u2014") // em-dash
        .replace(/\b\u2018\b/g, "'"); // handle conjunctions
        var delta = html.length - newHtml.length;
        $(target).html(newHtml);
        
        var newRange = document.createRange();
        newRange.setStart(range.startContainer, startOffset - delta);
        newRange.setEnd(range.startContainer, endOffset - delta);
        selection.removeAllRanges();
        selection.addRange(newRange);

        // other stuff happens here...
    });
})