JSFiddle - React, Tailwind, and code Playground

by sorvell1

HTML

<script src="https://unpkg.com/@webcomponents/webcomponentsjs@latest/webcomponents-loader.js"></script>
<script src="https://unpkg.com/[email protected]/dist/dummy.min.js"></script>

<!-- Works only on browsers that support Javascript modules like Chrome, Safari, Firefox 60, Edge 17 -->
<script type="module">
  import {LitElement, html, css} from 'https://unpkg.com/lit-element/lit-element.js?module';
  
  import {directive} from 'https://unpkg.com/lit-html/lib/directive.js?module';
  
  const editableValue = directive((part) => {
 		console.log(part);
  });

  class MyElement extends LitElement {
  
	  static get properties() {
    	return {
      	textData: {type: String}
      }
    }
    
    static get styles() {
      return css`
      #my-component {
        font-family: Arial, Helvetica, sans-serif;
      }
      pre {
        border: 1px solid black;
        width: 100%;
        height: 100%;
      }
      button {
        padding: 5px 15px;
        font-weight: bold;
        text-transform: uppercase;
        margin-right: 15px;
      }
      `;
    }
    
    clearText() {
    	this.textData = "";
    }
    
    addJunk() {
      let additional = "";
      if (this.textData) {
        additional = "\n";
      }
      this.textData += `${additional}${Dummy.text(3, 6)}`;
    }
    
    constructor() {
      super();
      this.textData = "";
    }
    
    saveInput(e) {
      let userInput = e.target.innerText.slice(1, -1);
      this.textData = userInput;
      console.log('saveInput', this.textData);
    }

    render() {
      return html`
        <div id="my-component">
          <h2>Foobar Editor</h2>
          <nav>
            <button @click="${this.clearText}">Clear Text</button>
            <button @click="${this.addJunk}">Add Junk</button>
          </nav>
          <pre contenteditable="true" @input="${this.saveInput}">${editableValue(this.textData)}</pre>
        </div>
      `;
    }  
  }
	
  customElements.define('my-element',...