JSFiddle - React, Tailwind, and code Playground

HTML

<div id="lc"></div>
<iframe id="edit"></iframe>

CSS

#lc { background: #eeeeee; margin-bottom: 5px; width: 200px; border: 1px solid #bbbbbb; }
#edit { width: 200px; border: 1px solid #bbbbbb; }

JavaScript

var editable = $(document.getElementById('edit').contentWindow.document);

editable.attr('designMode', "on").keyup(function(){
    var length = $(this).find('body').children('br, p, div').length;
    
    if($(this).find('body').html().length && !length){
        length = 1;
    }
    
    $('#lc').text(length);
});