JSFiddle - React, Tailwind, and code Playground

by bigdavesmith

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.5.4/webcomponents.js"></script>
<example-element></example-element>
<button id="insertOrderedList">Insert Ordered List</button>
<button id="insertUnorderedList">Insert Unordered List</button>
<button id="bold">Bold</button>

<template>
    <div contenteditable="true">Select some of this text and then click one of the buttons.</div>
</template>

JavaScript

var ExampleElement = Object.create(HTMLElement.prototype);

ExampleElement.createdCallback = function() {
  var template = document.querySelector('template');
  var clone = document.importNode(template.content, true);
  this.createShadowRoot().appendChild(clone);
};

document.registerElement('example-element', {prototype: ExampleElement});

document.querySelector('#insertOrderedList').addEventListener('click', function() {
    document.execCommand('insertOrderedList');
});
document.querySelector('#insertUnorderedList').addEventListener('click', function() {
    document.execCommand('insertUnorderedList');
});
document.querySelector('#bold').addEventListener('click', function() {
    document.execCommand('bold');
});