JSFiddle - React, Tailwind, and code Playground

HTML

<div class="page" data-id="1" contenteditable>
Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе.
</div>

CSS

.page {
    width: 600px;
    border: 1px solid #ccc;
    padding: 10px 15px;
    margin: 0 0 15px 0;
}

JavaScript

$(document).on('keypress', '.page', function(e) {
    var $this = $(this);
    var height = $this.outerHeight();
    var pageId = parseInt($this.data('id'));
    
    if (height > 250) {
        e.preventDefault();
        if ($this.next().data('id') != pageId + 1) {
            $('<div/>', {
                'class': 'page',
                'data-id': pageId + 1,
                'contenteditable': true
            }).insertAfter($this).focus();
        }
    }
});