JSFiddle - React, Tailwind, and code Playground

by artur_arseniev

HTML

<p><button type="button" id="h1-button">H1</button></p>
<div id="edit-area" contenteditable="true">
    <h1 id="something">This is heading</h1>
    <div id="something2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed posuere interdum sem. Quisque ligula eros ullamcorper quis, lacinia quis facilisis sed sapien. Mauris varius diam vitae arcu. Sed arcu lectus auctor vitae, consectetuer et venenatis eget velit. Sed augue orci, lacinia eu tincidunt et eleifend nec lacus. Donec ultricies nisl ut felis, suspendisse potenti.</div>
</div>

JavaScript

$('#h1-button').click(function() {
    var html = $('#edit-area').html();
    document.execCommand('formatBlock', false, 'h1');
    if(html == $('#edit-area').html()) {
        document.execCommand('formatBlock', false, 'div');
    }
});