JSFiddle - React, Tailwind, and code Playground

by Valder Black

HTML

<!-- Попробуйте набрать несколько строчек начиная с большой буквы, а затем поставьте точку -->

<div id="content" contenteditable="true"><br>A</div><br>
<textarea id="txt"></textarea>

CSS

#content
{
    width: 60%;
    min-height: 8em;
    border: 1px dashed grey;
    border-radius: 6px;
    padding: 5px;
    outline: none;
    transition: 0.3s;
}
#content:focus {border: 1px dashed #242424;}

.first-letter
{
text-transform: uppercase;
font-size: 150%;
margin-left: 20px;
font-weight: bold;
color: #3d3d3d;
}

JavaScript

$("#content").on('keyup', function(e){
    $('#txt').val($('#content').html());
});

// Заменяем вставку contenteditable <div></div> на привычный br
$("#content").keypress(function(e){
    if(e.keyCode == 13){
        e.preventDefault();
        document.execCommand('insertHTML', false, '<br>\u200a<q>');
// Создаем буквицу        
        var str = $('#content').html();
        str = str.replace(/\<br\>\s?([A-ZА-Я])/g, '<br><span class="first-letter">$1</span>' );
        $('#content').html(str);
// Переносим курсор на место тега q, а затем удаляем его
    	var mySpan = $(this).children('q')[0];
        var sel = window.getSelection();
        var range = document.createRange();
        range.setStart(mySpan, 0);
        sel.removeAllRanges();
        sel.addRange(range);
    	$('q').remove();
    }
});