JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.8/summernote.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.8/summernote.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="summernote">...</div>
<mark id="maxContentPost">10</mark>

JavaScript

$(document).ready(function () {
                $('#summernote').summernote({
                    toolbar: [
                      ['style', ['bold', 'italic', 'underline', 'clear']]
                    ],
                    callbacks: {
                        onKeydown: function (e) { 
                            var t = e.currentTarget.innerText; 
                            if (t.trim().length >= 10) {
                                //delete key
                                if (e.keyCode != 8)
                                e.preventDefault(); 
                            } 
                        },
                        onKeyup: function (e) {
                            var t = e.currentTarget.innerText;
                            $('#maxContentPost').text(10 - t.trim().length);
                        },
                        onPaste: function (e) {
                            var t = e.currentTarget.innerText;
                            var bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text');
                            e.preventDefault();
                            var all = t + bufferText;
                            document.execCommand('insertText', false, all.trim().substring(0, 10));
                            $('#maxContentPost').text(10 - t.length);
                        }
                    }
                });
            });