JSFiddle - React, Tailwind, and code Playground

HTML

<div contenteditable="true"><p>These "dumb quotes" are transformed correctly -- on blur(), but the ones below only close:</p>
<p>"dumb quotes"</p></div>

CSS

[contenteditable="true"] {
    font-size: 20px;
    border:solid 1px;
}

JavaScript

$(document).ready(function() {
    $('div').focus();
});

$('div').blur(function() {
    text = replace($(this).html());
    $(this).html(text);
});

// replaces straight quotes to curly and double hyphens to em-dashes
function replace(a) {
    console.log(a);
  return a.replace(/'\b/g, "\u2018")  // Opening singles
     .replace(/\b'/g, "\u2019")  // Closing singles
     .replace(/"\b/g, "\u201c")  // Opening doubles
     .replace(/\b"/g, "\u201d")  // Closing doubles
     .replace(/--/g,  "\u2014"); // em-dashes
};